Chrome Developer Tools: Overstyringer og arbeidsområde - En omfattende veiledning

I denne veiledningen vil du lære hvordan du kan bruke Chrome Developer Tools til å tilpasse stiler og scripts uten å endre originalkoden. Det vises hvordan du kan gjennomføre omfattende tester og tilpasninger på nettstedet ditt ved hjelp av Overrides og Chrome Workspace, uten å måtte berøre den opprinnelige serverfilen.

Viktigste læringspunkter

• Med Overrides kan du overskrive filer lokalt for å utføre tester og tilpasninger.
• Workspace lar deg koble den lokale utviklingsmappen din til Chrome Developer Tools for å gjøre endringer direkte.
• Disse to funksjonene er svært nyttige for å feilsøke problemer i produksjonsmiljøet uten å påvirke den opprinnelige serverkoden.

Trinn-for-trinn-veiledning

For å bruke Chrome Developer Tools effektivt, følg disse trinnene:

1. Bruk av Overrides

Først vil vi bruke Overrides-funksjonen i Chrome. Velg en JavaScript-fil, for eksempel main.js, som lastes fra serveren.

Høyreklikk på filen og velg "Override Content" i kontekstmenyen.

Et dialogvindu vil åpne seg der du kan velge plasseringen for den lokale filen. Sørg for at du allerede har opprettet en mappe der du ønsker å lagre de overskrivende filene dine.

Velg den ønskede mappen og klikk på "Select Folder". Dette etablerer forbindelsen mellom den originale filen og den lokale filen din.

Nå må du gi nettleseren tilgang til denne mappen. Klikk igjen på Overrides-menyen, og forsikre deg om at tillatelsen for å få tilgang til den angitte mappen er aktivert.

2. Opprettelse av en lokal fil

Nå kan du opprette en ny fil i Overrides-mappen. Åpne filen og skriv for eksempel inn et enkelt alert()-skript.

Du kan tilpasse innholdet slik det passer dine behov. Lagre filen og last siden på nytt for å se at nå vises varslingvinduet i stedet for filen som opprinnelig ble lastet fra serveren.

3. Sjekk av nettverksaktivitet

For å forsikre deg om at filen ikke lenger lastes fra serveren, åpne Network-Tab i Developer Tools. Du bør se at main.js-filen nå ikke lenger blir be om fra serveren, men i stedet de lokale overskrevne innholdene.

Hvis du ønsker å legge til flere Overrides eller slette eksisterende, gå til Overrides-området der du får en oversikt over alle aktive Overrides.

4. Arbeid med Workspace

Neste steg er å opprette Workspace. Her kan du knytte din lokale utviklingsmappe til Developer Tools. Gå til innstillingene for Developer Tools og se etter alternativet "Workspace".

Velg mappen der prosjektene dine befinner seg. Chrome trenger også tillatelse til å få tilgang til denne mappen, så sørg for at du har gitt de nødvendige tillatelsene.

5. Endringer i koden

Nå kan du jobbe direkte i arbeidsområdet. For eksempel kan du åpne main.js-filen din, gjøre endringer og lagre filen. Koden vil da automatisk lastes på nytt fra serveren, og du kan umiddelbart se hvordan tilpasningen påvirker nettstedet ditt.

6. Feilsøking i arbeidsområdet

En praktisk fordel med arbeidsområdet er at du kan sette brytere for å feilsøke koden din effektivt. Sett brytere i kodens linjer og last siden på nytt for å pause utførelsen og sjekke dagens tilstand av variablene.

7. Fordeler og ulemper

Selv om arbeidsområdet er nyttig, anbefaler mange utviklere å gjøre endringer direkte i en kodeeditor som Visual Studio Code og lagre filene der. Dette gjør at du bedre kan se hvilken versjon av filene som brukes. Når du bruker arbeidsområdet, kan det bli forvirrende, spesielt hvis koblingen til de opprinnelige filene ikke er tydelig.

Likevel, hvis du bare redigerer enkle CSS-filer eller ikke transpilert kode, kan arbeidsområdet være et godt alternativ.

Oppsummering

I denne veiledningen har du lært hvordan du kan jobbe med overrides og arbeidsområdet i Chrome Developer Tools for å tilpasse stiler og skript uten å berøre den opprinnelige serverfilen. Med overrides kan du raskt gjøre endringer mens arbeidsområdet lar deg jobbe direkte med utviklingsmappen din.