Chrome Developer Tools: Overrides och Workspace - En omfattande guide

I den här handledningen kommer du att lära dig hur du kan använda Chrome Developer Tools för att anpassa stilar och skript utan att behöva göra ändringar i originalkoden. Det kommer att visas hur du med hjälp av Overrides och Chromes Workspace kan göra omfattande tester och anpassningar på din webbplats utan att behöva röra originafilen på servern.

Viktigaste insikter

• Med Overrides kan du lokalt skriva över filer för att göra tester och anpassningar.
• Workspace-miljön låter dig ansluta din lokala utvecklingsmapp till Chrome Developer Tools för att göra ändringar direkt.
• Dessa två funktioner är mycket användbara för att felsöka problem i produktionsmiljön utan att påverka originalserverkoden.

Steg-för-steg-guide

För att effektivt använda Chromes Developer Tools, följ dessa steg:

1. Använda Overrides

Först vill vi använda Chromes Overrides-funktion. Välj en JavaScript-fil, till exempel main.js, som laddas från servern.

Högerklicka på filen och välj "Override Content" i kontextmenyn.

Ett dialogfönster öppnas där du kan välja platsen för den lokala filen. Se till att du redan har skapat en mapp där du vill placera dina ersättningsfiler.

Välj den önskade mappen och klicka på "Välj mapp". Detta skapar anslutningen mellan originalfilen och din lokala fil.

Nu måste du ge webbläsaren åtkomst till den här katalogen. Klicka återigen på Overrides-menyn och se till att behörigheten för åtkomst till den angivna katalogen är aktiverad.

2. Skapa en lokal fil

Nu kan du skapa en ny fil i Override-mappen. Öppna filen och skriv till exempel in ett enkelt alert()-skript.

Du kan anpassa innehållet enligt dina behov. Spara filen och uppdatera sidan för att se att nu visas larmskriften istället för filen som ursprungligen laddades från servern.

3. Kontrollera nätverksaktiviteten

För att säkerställa att filen inte längre laddas från servern, öppna Network-fliken i Developer Tools. Du ska se att main.js-filen inte längre hämtas från servern utan istället de lokalt överträdda innehållet.

Om du vill lägga till ytterligare överträdelser eller ta bort befintliga, gå till Overrides-området där du har en översikt över alla aktiverade overträdelser.

4. Arbeta med Workspace

Nästa steg är att konfigurera Workspace. Här kan du ansluta din lokala utvecklingsmapp till Developer Tools. Gå till inställningarna för Developer Tools och leta efter alternativet "Workspace".

Välj mappen där dina projekt finns. Chrome behöver också tillgång till den här mappen, så se till att du har gett nödvändiga behörigheter.

5. Ändra i koden

Nu kan du arbeta direkt i Workspace. Öppna till exempel din main.js-fil, gör ändringar och spara filen. Koden kommer då att laddas om automatiskt från servern, och du kan omedelbart se hur anpassningen påverkar din webbplats.

6. Felsökning i Workspace

En praktisk fördel med Workspaces är att du kan sätta brytpunkter för att effektivt felsöka din kod. Sätt brytpunkter i raderna i din kod och uppdatera sidan för att avbryta körningen och kontrollera den aktuella variabelns status.

7. För- och nackdelar

Trots att Workspace är användbart, rekommenderar många utvecklare att göra ändringar direkt i en kodredigerare som Visual Studio Code och spara filerna där. Detta ser till att du kan se tydligare vilken version av filerna som används. När du använder Workspaces kan det vara förvirrande, speciellt om kopplingen till originalfilerna inte är tydlig.

Ändå, om du bara redigerar enkla CSS-filer eller okompilerad kod, kan Workspace vara ett bra alternativ.

Sammanfattning

I den här handledningen har du lärt dig hur du kan arbeta med Overrides och Workspaces i Chrome Developer Tools för att anpassa stilar och skript utan att röra den ursprungliga serverfilen. Med Overrides kan du snabbt göra ändringar, medan Workspace tillåter dig att arbeta direkt med din utvecklingsmapp.