Slik beholder du CSS-endringene i Chrome

Du mister aldri en stilendring igjen, med lokal overstyring i nye Chrome DevTools.

Lokal overstyring bør alle som jobber med CSS kjenne til, mener fagredaktør Jørgen Jacobsen. 📸: Ole Petter Baugerød Stokke
Lokal overstyring bør alle som jobber med CSS kjenne til, mener fagredaktør Jørgen Jacobsen. 📸: Ole Petter Baugerød Stokke Vis mer

En av de beste egenskapene til Chromes utviklerverktøy DevTools, er at man kan endre CSS, HTML og JavaScript direkte i nettleseren.

Men noe av det kjipeste er å oppleve at alle CSS-endringer man har gjort forsvinner i en fei – når sida laster på nytt.

Flaks dam at det kom en løsning på dette problemet i DevTools 65, med lokal overstyring.

Slik funker det

Lokale overstyringer fungerer enkelt og greit ved at Chrome lagrer en lokal kopi på maskinen din av CSS-filer og andre filer du velger å endre.

På neste sidelasting blir disse filene lastet istedenfor filene fra nett. Helt til du velger å skru av lokale overstyringer.

Det er derfor greit å være bevisst på at så lenge lokale overstyringer står på, vil du aldri få oppdaterte filer fra nettsiden.

Du velger selv hvilken mappe du vil lagre endringene i på maskinen din. uheldigvis blir alle filer fra alle sider du skrur på lokale overstyringer lagret i samme mappe. Så her gjelder det å ha tunga rett i munnen.

Her har vi lagt inn det vi kan bare anta er den våte drømmen til frontdeskerne på Dagbladet.no. Nemlig at det er en ekte roterende sirene i bakgrunnen av nyhetsvarslene deres. Og den dukker selvsagt opp etter at siden lastes på nytt. 📸: Jørgen Jacobsen
Her har vi lagt inn det vi kan bare anta er den våte drømmen til frontdeskerne på Dagbladet.no. Nemlig at det er en ekte roterende sirene i bakgrunnen av nyhetsvarslene deres. Og den dukker selvsagt opp etter at siden lastes på nytt. 📸: Jørgen Jacobsen Vis mer

Slik kommer du i gang

Det er ganske enkelt å skru på lokal overstying:

  1. Det første du gjør er å surfe til siden du vil lage overstyringer for.
  2. Deretter åpner du Chrome DevTools, som vanlig ved å trykke F12 i Windows eller CMD+Option+I på Mac.
  3. Så velger du «sources» i toppmenyen, og «overrides »i undermenyen.
  4. Deretter huker du av for lokale overstyringer («enable local overrides»), og velger hvilken mappe filene skal lagres i. Vær obs på at Chrome ber om skrivetilgang til mappa.

Nå er du i gang! Og kan endre CSS-en i «Elements»-fanen

Her har vi skrudd på lokale overstyringer for kode24.no og Dagbladet.no. 📸: Jørgen Jacobsen
Her har vi skrudd på lokale overstyringer for kode24.no og Dagbladet.no. 📸: Jørgen Jacobsen Vis mer

Vær obs på

Det er et par snodige hemninger i denne løsningen som du må være bevisst på.

Det går fint å endre CSS for alle selektorer som allerede finnes i CSS-fila di. Med andre ord: Hvis du inspiserer et element, og det allerede finnes stiling for det elementet i CSS-en din, kan du fint endre på den og få den skrevet til de lokale filene dine.

Trykk og hold inne pluss-tegnet (bak popup-fanen) for å velge en lokal CSS-fil istedenfor inspector-stylesheet, når du skal opprette en ny selektor. 📸: Jørgen Jacobsen
Trykk og hold inne pluss-tegnet (bak popup-fanen) for å velge en lokal CSS-fil istedenfor inspector-stylesheet, når du skal opprette en ny selektor. 📸: Jørgen Jacobsen Vis mer

Hvis du derimot trenger å legge på en ny selektor som du vil stile – som man gjør ved å trykke på plusstegnet øverst til høyre under Styles-fanen – vil ikke Chrome lagre den til filen din. Da må du holde inne plusstegnet og velge en lokal CSS-fil istedenfor inspector-stylesheet.

Endringer du gjør på HTML under Elements-fanen i DevTools vil heller ikke lagres lokalt. Endrer du tekst inni en H1-tag forsvinner den når du laster siden på nytt. Men, besøker du HTML-filen din under Sources-fanen og Page, vil du kunne gjøre endringer som blir lagret lokalt.

Det samme gjelder for JavaScript. Gjør du endringer i filene under Page-fanen blir de der etter siden lastes på nytt.

Her legger vi til en konsoll logg i JavaScript-filen carousel.js som tegner annonsekarusellen på forsiden av kode24.no. Merk at filer som blir endret får en lilla sirkel på seg. 📸: Jørgen Jacobsen
Her legger vi til en konsoll logg i JavaScript-filen carousel.js som tegner annonsekarusellen på forsiden av kode24.no. Merk at filer som blir endret får en lilla sirkel på seg. 📸: Jørgen Jacobsen Vis mer

Prøv også StyleURL

Ulempen med løsningen til Chrome er selvsagt at du får hele filen, og ikke bare endringene, lagret lokalt. Det finnes riktignok et par løsninger for å sile ut endringene dine.

Med utvidelsen StyleURL til Chrome får du enda bedre oversikt over CSS-endringene du har gjort i nettleseren. 📸: Jørgen Jacobsen
Med utvidelsen StyleURL til Chrome får du enda bedre oversikt over CSS-endringene du har gjort i nettleseren. 📸: Jørgen Jacobsen Vis mer

Under page-fanen kan du høyreklikke på enhver fil og velge «Local Modifications». Da vil du få opp en fane med alle historiske endringer.

Om du vil ha litt mer granulert kontroll på CSS-endringene dine anbefaler vi Chrome-utvidelsen StyleURL. Denne utvidelsen gir det blant annet muligheten til å få CSS-diffen din ned som en egen fil, eller lage en Gist ut av det.

Har du andre tips til nyttig funksjonalitet for utviklere i Chrome eller Firefox? Fortell oss i kommentarfeltet!