Har du lagt merke til at du stadig kopierer den samme JavaScript inn i DevTools-konsollen om og om igjen? En debug-snutt, uthenting av data fra en side, rask DOM-endring, og hver gang må du skrive den manuelt eller lime inn fra et notat.

Chrome DevTools har hatt en innebygd snuttredigerer rett i Sources-fanen i flere år. Du skriver skriptet én gang, gir det et navn og kjører det på hvilken som helst side med ett klikk eller en snarvei. Det fungerer raskere enn en bokmerklet og krever ingen utvidelser.

Vi går gjennom hele syklusen steg for steg: fra å åpne Snippets-panelet til ferdige arbeidseksempler du kan ta i bruk selv.

💡 Rask oversikt:

• Åpne Snippets-panelet via Sources-fanen eller kommandomenyen
• Opprett en ny snutt og gi den et meningsfylt navn
• Skriv JavaScript i kodeeditoren og lagre med Ctrl+S
• Kjør snutten med Kjør-knappen eller via kommandomenyen med !
• Gå gjennom praktiske eksempler: tømme en side, samle data, endre stiler

Hva snutter er og hvorfor du trenger dem

En snutt er et JavaScript-fragment som lagres direkte i Chrome DevTools. I motsetning til kode i konsollen forsvinner den ikke når du laster siden på nytt eller lukker nettleseren; den ligger i Sources-fanen og venter på å bli kjørt.

Den største fordelen sammenlignet med konsollen: en snutt kjøres i konteksten til den gjeldende siden og har full tilgang til dens DOM, variabler og API-er. Du kan skrive et skript for å hente ut data fra et hvilket som helst nettsted, endre layout eller automatisere rutineoppgaver og kjøre det når du vil uten å måtte skrive det på nytt.

En alternativ tilnærming er bokmerkletter (bokmerker med javascript: i URL-en), men de er begrenset av URL-lengde og upraktiske for kode over flere linjer. I Firefox var tilsvarende funksjonalitet Scratchpad, men den ble fjernet fra nettleseren fra og med versjon 70 og erstattet med konsolleditoren for flere linjer.

Se denne korte videoopplæringen om snutter; den er på engelsk, men alle handlingene vises på skjermen og samsvarer fullt ut med trinnene beskrevet nedenfor.

Her ser du hvordan en typisk snuttarbeidsflyt ser ut: skjermbildet viser originalsiden til venstre og koden i editoren til høyre.

Kildekoden fra dette eksempelet gjør tre ting: logger en melding til konsollen, tømmer document.body og setter inn et nytt avsnitt:

1
console.log('Hello, Snippets!');
2
document.body.innerHTML = '';
3
var p = document.createElement('p');
4
p.textContent = 'Hello, Snippets!';
5
document.body.appendChild(p);

Etter kjøring endres siden fullstendig: Hello, Snippets! vises i konsollen, og kroppsinnholdet erstattes med et enkelt avsnitt.

Slik åpner du snuttepanelet

Snuttepanelet ligger inne i Sources-fanen. Det er to måter å komme dit på: med musen og via kommandomenyen.

Metode én: med musen

Åpne DevTools (F12 eller Ctrl+Shift+I) og gå til fanen Sources. Til venstre ser du Page-panelet med sidens filtre; det er åpent som standard.

Klikk på fanen Snippets i den samme venstre kolonnen. Hvis fanen ikke er synlig, klikker du på pilen for More tabs (>>); da åpnes en nedtrekksliste med skjulte faner, inkludert Snippets.

Metode to: kommandomenyen

Kommandomenyen er den raskeste måten å navigere i DevTools på hvis du husker snarveien.

• Sett fokus hvor som helst inne i DevTools.
• Trykk Ctrl+Shift+P (Windows/Linux) eller Cmd+Shift+P (Mac) for å åpne kommandomenyen.
• Begynn å skrive snippets og velg Show Snippets, og trykk deretter Enter.

Opprette en ny snippet

Snippets-panelet er åpent; la oss nå legge til det første skriptet.

Via Sources-panelet

I Snippets-panelet klikker du på knappen New snippet. Skriv inn navnet på snippeten og trykk Enter; den vil vises i listen til venstre.

Navnet bør være meningsfylt; om en måned husker du ikke hva snippet-3 gjør. Skriv «clear-page-and-log», «extract-product-prices» eller «toggle-dark-mode».

Via kommandomenyen

Samme snarvei Ctrl+Shift+P / Cmd+Shift+P, men skriv nå snippet og velg Create new snippet, deretter Enter.

Den nye snippeten opprettes med et standardnavn; gi den nytt navn ved å høyreklikke og velge Rename.

Redigere snippet-kode

Klikk på snippet-navnet i venstre panel; kodeeditoren åpnes til høyre. Dette er en fullverdig editor med syntaksutheving, linjenumre og autofullføring for JavaScript.

Skriv kode som du ville gjort i en hvilken som helst editor. Alle standard nettleser-API-er er tilgjengelige: objektene document og window, funksjonene fetch og console, lagringen localStorage. Hele settet av det siden ser.

Når koden ikke er lagret, vises en stjerne ved siden av snippet-navnet. Lagre: Ctrl+S (Windows/Linux) eller Cmd+S (Mac).

Bruk Ctrl+Z / Cmd+Z for å angre; endringshistorikken fungerer innenfor redigeringsøkten.

Kjøre en snippet

Med Kjør-knappen i Sources-panelet

Åpne ønsket snippet i editoren. Klikk på Run-knappen (Play-ikonet) nederst i panelet:

Eller trykk Ctrl+Enter (Windows/Linux) / Cmd+Enter (Mac). Snippeten vil kjøre i konteksten til den åpne siden.

Via kommandomenyen med et utropstegn

Åpne kommandomenyen (Ctrl+Shift+P / Cmd+Shift+P), slett >-symbolet, skriv !, og begynn å skrive inn snippet-navnet. DevTools vil vise treffende alternativer:

Velg den du trenger og trykk Enter. Denne metoden er praktisk når du ikke vil bytte til Sources-fanen.

Endre navn og slette

Begge operasjonene gjøres fra Snippets-panelet ved å høyreklikke på snippet-navnet:

• Rename: angi et nytt navn,
• Remove: slett snippeten permanent.

Sletting ber ikke om bekreftelse, så vær forsiktig. Før du sletter et komplekst skript, kopier koden til en tekstfil.

Praktiske snippet-eksempler

Vi har dekket teorien; her er flere ferdige skript du kan kopiere, lagre som en snippet og bruke med en gang.

Tømme en side for et skjermbilde

Fjerner alt innhold og setter inn en ren hvit bakgrunn, nyttig når du tar skjermbilder for en portefølje eller dokumentasjon:

1
document.body.innerHTML = '';
2
document.body.style.backgroundColor = '#fff';

Samle alle lenker fra en side

Henter ut alle URL-er og skriver dem ut i konsollen som en liste. Nyttig for å revidere en side eller samle data:

1
const links = [...document.querySelectorAll('a[href]')];
2
links.forEach((a, i) => console.log(`${i + 1}. ${a.href} — "${a.textContent.trim()}"`));
3
console.log(`Всего ссылок: ${links.length}`);

Mørk modus på ethvert nettsted

Bruker invertering på hele siden, fungerer selv der det ikke finnes noe innebygd mørkt tema:

1
document.documentElement.style.filter = 'invert(1) hue-rotate(180deg)';
2
const imgs = document.querySelectorAll('img, video');
3
imgs.forEach(el => el.style.filter = 'invert(1) hue-rotate(180deg)');

Utheving av alle knapper på en side

Tegner en rød ramme rundt hver <button> og input[type="submit"], praktisk for å sjekke layout:

1
document.querySelectorAll('button, input[type="submit"], [role="button"]').forEach(el => {
2
  el.style.outline = '3px solid red';
3
});

Alle disse snuttene kan kombineres og utvides til dine egne oppgaver. Lagre én gang, bruk i årevis.

⁉️🤔 Ofte stilte spørsmål

Hvor lagres Chrome DevTools-snippets fysisk?

Snippets lagres i Chrome-profilen i filen Preferences (JSON) under banen %LocalAppData%\Google\Chrome\User Data\Default\Preferences på Windows eller ~/Library/Application Support/Google/Chrome/Default/Preferences på Mac. De synkroniseres IKKE via en Google-konto; når du bytter datamaskin eller installerer nettleseren på nytt, går snippets tapt. For å overføre dem manuelt, kopier devtools.preferences.snippets-seksjonen fra én Preferences-fil til en annen mens nettleseren er lukket.

Hvordan skiller en snippet seg fra en bookmarklet?

En bookmarklet er et bokmerke med en URL som starter med javascript:, begrenset av URL-størrelse (ca. 2000 tegn) og upraktisk å redigere. En snippet er et fullverdig redigeringsprogram inne i DevTools uten lengdebegrensninger, med syntaksutheving og vedvarende lagring mellom økter. En snippet kan også kjøres med snarveien Ctrl+Enter uten at du trenger å ta hendene bort fra tastaturet.

Kan du kjøre en snippet automatisk ved sideinnlasting?

Ikke direkte. En snippet krever alltid manuell kjøring. Hvis du trenger automatisering ved innlasting, bruk en Chrome-utvidelse (content script) eller Tampermonkey/Violentmonkey med userscripts; de utløses ved sideinnlasting og krever ikke manuell inngripen.

Hvordan tar jeg sikkerhetskopi av snippets før jeg installerer Chrome på nytt?

Åpne DevTools, gå til Sources → Snippets, høyreklikk på hver snippet og velg Save as; dette lagrer en .js-fil på disken. Alternativt kan du åpne chrome://version/, finne profilbanen, lukke Chrome og kopiere JSON-seksjonen devtools.preferences.snippets fra Preferences-filen.

Hvorfor ser ikke snippet-en min variabler fra konsollen?

En snippet kjøres i sitt eget scope; den har ikke tilgang til variabler deklarert i konsollen via var/let/const i det globale scopet. For å overføre data, tilordne en verdi direkte til window: window.myData = {...} i konsollen, og les deretter window.myData i snippet-en. Eller omvendt: snippet-en kan sette data på window, og konsollen kan lese dem.

Er det verdt å lære snippets i 2026?

Snippets er et av de verktøyene som ikke endrer seg på årevis, men som radikalt setter fart på rutinearbeid hvis du ikke glemmer dem. Fem minutter brukt på å lage et skript for å samle lenker eller rydde en side sparer dusinvis av manuelle operasjoner hver måned.

Start med tre enkle snippets: samle data fra tabeller på en side, rask DOM-rydding for skjermbilder og utheving av et element etter selector. Lagre dem, så vil du neste gang du trenger å hente ut data fra et tredjepartsnettsted eller sjekke layouten, være ferdig på sekunder i stedet for å bruke en halvtime på å kopiere og lime inn.

Bare husk å ta sikkerhetskopi: snippets synkroniseres ikke mellom enheter, og uten en kopi av Preferences-filen vil de forsvinne når du installerer systemet på nytt.