Du redigerar CSS på en livesajt, byter sida och alla ändringar försvinner. Frustrerande? Absolut. Panelen Elements i Chrome DevTools är utmärkt för snabba redigeringar av stilar och märkspråk, men fram tills nyligen varade alla experiment bara fram till första F5. Och att gå tillbaka till kodredigeraren, bygga om och distribuera om bara för att testa en hypotes är slöseri med tid som ingen gillar.

Lyckligtvis har Chrome en inbyggd mekanism som löser problemet. Den kallas Local Overrides och låter dig spara ändringar lokalt så att webbläsaren tillämpar dem även efter att sidan laddats om. Funktionen dök upp redan i Chrome 65, men har under åren fått nya möjligheter: nu kan du inte bara åsidosätta filer utan även HTTP-svarsheaders och mocka API-anrop direkt från webbläsaren.

I den här guiden, från aktivering till spårning av redigeringar: allt en utvecklare behöver för produktivt arbete med local overrides.

💡 Snabb översikt:

• Aktivera Local Overrides på fliken Sources och välj en mapp för att lagra åsidosatta filer.
• Redigera CSS, JS eller HTML på fliken Sources, ändringar sparas automatiskt lokalt.
• Ladda om sidan eller navigera till en annan, Chrome fortsätter att tillämpa dina redigeringar.
• Spåra diff-ändringar på fliken Changes och hantera filer via Overrides.

Så aktiverar du local overrides

Öppna DevTools (F12 eller Ctrl+Shift+I) och gå till fliken Sources. I panelens vänstra del hittar du fliken Overrides. Om den inte syns, klicka på >>-ikonen för att visa dolda flikar.

Klicka på knappen Select folder for overrides. Chrome kommer att be om åtkomst till filsystemet, välj en befintlig mapp eller skapa en ny. Det är här alla åsidosatta filer kommer att lagras.

När du har valt mappen aktiveras kryssrutan Enable Local Overrides automatiskt. Observera: på fliken Network visas en varningsikon, den signalerar att vissa nätverksanrop kan fångas upp och ersättas med lokala filversioner. Detta är normalt och betyder att overrides är aktiva.

Så gör och sparar du ändringar

Nu kommer den intressanta delen, redigering. Öppna valfri fil via fliken Sources: hitta den nödvändiga CSS- eller JavaScript-filen i filträdet till vänster och dubbelklicka. Gör redigeringar och tryck Ctrl+S, filen sparas i din lokala mapp och Chrome börjar använda den lokala versionen istället för serverversionen.

Viktig nyans: redigera märkspråk specifikt på fliken Sources, inte Elements. Panelen Elements är praktisk för visuellt arbete med DOM:en, men HTML-ändringar som görs där sparas inte som local overrides. Byt till Sources, hitta den nödvändiga HTML-filen och redigera där, en lila prick bredvid filnamnet bekräftar att filen är åsidosatt.

Ladda om sidan eller navigera till en annan, Chrome fortsätter att tillämpa dina redigeringar. Vill du återställa originalet? Ta bort filen från overrides-mappen eller avmarkera Enable Local Overrides.

Värt att nämna separat är åsidosättning av HTTP-headers, en funktion som lades till i senare Chrome-versioner. Gå till fliken Network, högerklicka på ett anrop och välj Override headers. Chrome skapar en .headers-fil i din lokala mapp där du kan ange anpassade svarsheaders. Detta är ovärderligt för att testa CORS-policyer, Content-Security-Policy och cachning utan serverredigeringar.

Så spårar du gjorda redigeringar

När du aktivt åsidosätter dussintals filer är det lätt att glömma vad som exakt ändrades var. För detta har DevTools två användbara verktyg.

Fliken Overrides (på panelen Sources) visar en komplett lista över åsidosatta filer grupperade efter domäner. Härifrån kan du öppna valfri fil för vidare redigering eller ta bort en onödig override, högerklicka → Delete.

Fliken Changes finns i den nedre delen av DevTools, bredvid fliken Console. Den visar diffen mellan originalfilen och din lokala version, rad för rad, som i Git. Praktiskt för snabb granskning: vad du exakt ändrade i varje fil och hur mycket ändringarna skiljer sig från källan.

Snabbt tips: innan du refaktorerar eller experimenterar på en livesajt, ta en ögonblicksbild av ändringar via Changes, detta är din lokala "commit" som du alltid kan återgå till.

Overrides som ett verktyg för prestandatestning

Förutom bekväm prototypframtagning öppnar Local Overrides ett intressant scenario för prestandaanalys. Du har möjlighet att ändra kod på en icke-lokal sajt och omedelbart mäta effekten av dessa redigeringar på laddningstid och rendering.

Du misstänker till exempel att ett tredjeparts analysskript saktar ner renderingen av första skärmen. Åsidosätt anropet, ersätt originalskriptet med en tom fil eller en uppskjuten version och kör Lighthouse. Skillnaden i mätvärden kommer tydligt att visa om optimeringen är motiverad.

Ett annat scenario: typsnitt. Åsidosätt CSS-filen, ta bort @font-face för ett anpassat typsnitt och se hur mycket LCP (Largest Contentful Paint) förändras. Eller experimentera med laddningsordning för skript, flytta kritisk JS från <head> till slutet av <body> och jämför mätvärden.

Harry Roberts och Umar Hansa, välkända experter på webbprestanda, har publicerat screencasts med tydliga exempel på detta tillvägagångssätt. Deras demonstrationer visar: Local Overrides förvandlar webbläsaren till en sandlåda för prestandahypoteser där varje iteration tar sekunder, inte minuter.

Om du arbetar med en lokal utvecklingsserver är värdet av overrides lägre, du kontrollerar redan källkoden. Men när du snabbt behöver testa en idé i produktion eller på någon annans sajt utan tillgång till kodbasen är detta verktyg oumbärligt.

⁉️🤔 Vanliga frågor

Sparas local overrides efter att webbläsaren stängts?

Ja, alla filer lagras i mappen du valde på disken. Efter omstart av Chrome hämtas overrides automatiskt, förutsatt att kryssrutan Enable Local Overrides förblev aktiverad. Filerna själva försvinner ingenstans, eftersom de är vanliga filer i ditt filsystem.

Kan jag åsidosätta ett API-svar (JSON), inte bara statiska filer?

Ja, från och med Chrome 117 fungerar detta. På fliken Network, högerklicka på ett anrop och välj Override content, Chrome skapar en lokal fil med svarskroppen som du kan redigera. Vid nästa anrop returnerar webbläsaren din lokala version istället för serversvaret.

Varför återställs mina ändringar gjorda i panelen Elements efter omladdning?

Panelen Elements redigerar DOM:en i minnet, inte källfilerna. För att ändringar ska överleva F5, byt till fliken Sources, hitta motsvarande fil och redigera där. Spara via Ctrl+S så skapar Chrome en lokal override.

Hur delar jag local overrides med en kollega?

Skicka bara innehållet i overrides-mappen. Kollegan lägger filerna i sin mapp, anger den i DevTools via Select folder for overrides och alla redigeringar tillämpas på deras maskin. För teamarbete är det praktiskt att ha overrides-mappen i projektets Git-repository.

Kan jag använda Local Overrides i Firefox eller andra webbläsare?

Firefox har ingen motsvarighet till Local Overrides, att spara ändringar mellan omladdningar stöds inte. Edge, baserad på Chromium, har samma funktionalitet som Chrome eftersom den använder den gemensamma DevTools-kodbasen. Brave och Opera stöder också overrides som Chromium-webbläsare.

Varför du faktiskt behöver local overrides

Local Overrides i Chrome DevTools är inte bara en "praktisk funktion". Det är ett sätt att förvandla webbläsaren till en fullvärdig miljö för snabb prototypframtagning och hypotestestning utan att röra produktionskoden. Du sparar cykler av "redigera → bygg → distribuera → kontrollera" och får resultat direkt.

Testa det nu: öppna valfri sajt, aktivera overrides och ändra en rubrikfärg. Ladda om sidan. Ser du att färgen blev kvar? Det var det här allt handlade om.