Du redigerer CSS på et live-nettsted, bytter til en annen side, og alle endringer forsvinner. Frustrerende? Absolutt. Elementer-panelet i Chrome DevTools er flott for raske redigeringer av stiler og markup, men inntil nylig varte alle eksperimenter nøyaktig til første F5. Og å gå tilbake til kodeeditoren, bygge på nytt og distribuere bare for å teste en hypotese er bortkastet tid ingen liker.

Heldigvis har Chrome en innebygd mekanisme som løser dette problemet. Den kalles Local Overrides og lar deg lagre endringer lokalt slik at nettleseren bruker dem selv etter at du har oppdatert siden. Funksjonen dukket opp tilbake i Chrome 65, men har fått nye muligheter gjennom årene: nå kan du overstyre ikke bare filer, men også HTTP-responsheadere, og mocke API-forespørsler rett fra nettleseren.

I denne guiden, fra aktivering til sporing av redigeringer: alt en utvikler trenger for produktivt arbeid med local overrides.

💡 Rask oversikt:

• Aktiver Local Overrides på Sources-fanen og velg en mappe for å lagre overstyrte filer.
• Rediger CSS, JS eller HTML på Sources-fanen, endringer lagres automatisk lokalt.
• Oppdater siden eller naviger til en annen, Chrome fortsetter å bruke redigeringene dine.
• Spor diff-endringer på Changes-fanen og administrer filer via Overrides.

Slik aktiverer du local overrides

Åpne DevTools (F12 eller Ctrl+Shift+I) og gå til Sources-fanen. I venstre del av panelet finner du Overrides-fanen. Hvis den ikke er synlig, klikk på >>-ikonet for å vise skjulte faner.

Klikk på Select folder for overrides-knappen. Chrome vil be om tillatelse til å få tilgang til filsystemet, velg en eksisterende mappe eller opprett en ny. Det er her alle overstyrte filer vil bli lagret.

Etter at du har valgt mappen, vil avkrysningsboksen Enable Local Overrides slås på automatisk. Merk: på Network-fanen vil et varselikon dukke opp, det signaliserer at noen nettverksforespørsler kan bli fanget opp og erstattet med lokale filversjoner. Dette er normalt og betyr at overstyringer er aktive.

Slik gjør og lagrer du endringer

Nå kommer den interessante delen, redigering. Åpne en hvilken som helst fil via Sources-fanen: finn den nødvendige CSS- eller JavaScript-filen i filtret til venstre og dobbeltklikk. Gjør redigeringer og trykk Ctrl+S, filen lagres i din lokale mappe, og Chrome vil begynne å bruke den lokale versjonen i stedet for serverversjonen.

Viktig nyanse: rediger markup spesifikt på Sources-fanen, ikke Elements. Elementer-panelet er praktisk for visuelt arbeid med DOM-en, men HTML-endringer gjort der lagres ikke som local overrides. Bytt til Sources, finn den nødvendige HTML-filen og rediger der, en lilla prikk ved siden av filnavnet vil bekrefte at filen er overstyrt.

Oppdater siden eller naviger til en annen, Chrome vil fortsette å bruke redigeringene dine. Vil du gjenopprette originalen? Slett filen fra overrides-mappen eller fjern avkrysningen for Enable Local Overrides.

Verdt å nevne separat er overstyring av HTTP-headere, en mulighet lagt til i senere Chrome-versjoner. Gå til Network-fanen, høyreklikk på en forespørsel og velg Override headers. Chrome vil opprette en .headers-fil i din lokale mappe hvor du kan angi egendefinerte responsheadere. Dette er uvurderlig for testing av CORS-policyer, Content-Security-Policy og caching uten serverredigeringer.

Slik sporer du gjorte endringer

Når du aktivt overstyrer dusinvis av filer, er det lett å glemme hva som nøyaktig ble endret hvor. For dette har DevTools to nyttige verktøy.

Overrides-fanen (på Sources-panelet) viser en komplett liste over overstyrte filer gruppert etter domener. Herfra kan du åpne en hvilken som helst fil for videre redigering eller slette en unødvendig overstyring, høyreklikk → Delete.

Changes-fanen ligger i den nedre delen av DevTools, ved siden av Console-fanen. Den viser diffen mellom originalfilen og din lokale versjon, linje for linje, som i Git. Praktisk for rask revisjon: hva du nøyaktig endret i hver fil og hvor mye endringene avviker fra kilden.

Raskt tips: før refaktorering eller eksperimentering på et live-nettsted, ta et øyeblikksbilde av endringer via Changes, dette er din lokale «commit» du alltid kan gå tilbake til.

Overrides som et verktøy for ytelsestesting

Foruten praktisk prototyping, åpner Local Overrides et interessant scenario for ytelsesanalyse. Du har muligheten til å endre kode på et ikke-lokalt nettsted og umiddelbart måle effekten av disse redigeringene på lastehastighet og rendering.

For eksempel, du mistenker at et tredjeparts analysescript bremser renderingen av første skjermbilde. Overstyr forespørselen, erstatt det originale scriptet med en tom fil eller en utsatt versjon, og kjør Lighthouse. Forskjellen i metrikker vil tydelig vise om optimaliseringen er berettiget.

Et annet scenario: fonter. Overstyr CSS-filen, fjern @font-face for en egendefinert font, og se hvor mye LCP (Largest Contentful Paint) endres. Eller eksperimenter med innlastingsrekkefølge for script, flytt kritisk JS fra <head> til slutten av <body> og sammenlign metrikker.

Harry Roberts og Umar Hansa, velkjente eksperter på webytelse, har publisert screencasts med tydelige eksempler på denne tilnærmingen. Deres demonstrasjoner viser: Local Overrides gjør nettleseren til en sandkasse for ytelseshypoteser hvor hver iterasjon tar sekunder, ikke minutter.

Hvis du jobber med en lokal utviklingsserver, er verdien av overstyringer lavere, du kontrollerer allerede kildene. Men når du raskt trenger å teste en idé i produksjon eller på andres nettsted uten tilgang til kodebasen, er dette verktøyet uunnværlig.

⁉️🤔 Ofte stilte spørsmål

Lagres local overrides etter at nettleseren lukkes?

Ja, alle filer lagres i mappen du valgte på disken. Etter omstart av Chrome hentes overstyringer automatisk opp, forutsatt at avkrysningsboksen Enable Local Overrides forble aktivert. Selve filene forsvinner ingen steder, siden de er vanlige filer i filsystemet ditt.

Kan jeg overstyre et API-svar (JSON), ikke bare statiske filer?

Ja, fra og med Chrome 117 fungerer dette. På Network-fanen, høyreklikk på en forespørsel og velg Override content, Chrome vil opprette en lokal fil med responskroppen som du kan redigere. Ved neste forespørsel vil nettleseren returnere din lokale versjon i stedet for serversvaret.

Hvorfor tilbakestilles endringene mine gjort i Elementer-panelet etter oppdatering?

Elementer-panelet redigerer DOM-en i minnet, ikke kildefilene. For at endringer skal overleve F5, bytt til Sources-fanen, finn den tilsvarende filen og rediger den der. Lagre via Ctrl+S, og Chrome vil opprette en local override.

Hvordan deler jeg local overrides med en kollega?

Bare send innholdet i overrides-mappen. Kollegaen legger filene i sin mappe, spesifiserer den i DevTools via Select folder for overrides, og alle redigeringer gjelder på deres maskin. For teamarbeid er det praktisk å ha overrides-mappen i prosjektets Git-repository.

Kan jeg bruke Local Overrides i Firefox eller andre nettlesere?

Firefox har ingen tilsvarende Local Overrides-funksjon, lagring av endringer mellom innlastinger støttes ikke. Edge, basert på Chromium, har samme funksjonalitet som Chrome siden den bruker den felles DevTools-kodebasen. Brave og Opera støtter også overstyringer som Chromium-nettlesere.

Hvorfor du faktisk trenger local overrides

Local Overrides i Chrome DevTools er ikke bare en «praktisk funksjon». Det er en måte å gjøre nettleseren om til et fullverdig miljø for rask prototyping og hypotesetesting uten å røre produksjonskode. Du sparer «rediger → bygg → distribuer → sjekk»-sykluser og får resultater umiddelbart.

Prøv det nå: åpne et hvilket som helst nettsted, aktiver overstyringer og endre fargen på en overskrift. Oppdater siden. Ser du at fargen ble værende? Det var dette det handlet om.