Har du märkt att du gång på gång kopierar samma JavaScript till DevTools-konsolen? En felsökningssnutt, extrahering av data från en sida, snabb DOM-modifiering, och varje gång måste du manuellt skriva in den eller klistra in från ett anteckningsblock.

Chrome DevTools har haft en inbyggd snippet-redigerare direkt på fliken Sources i flera år. Du skriver skriptet en gång, ger det ett namn och kör det på vilken sida som helst med ett enda klick eller kortkommando. Det fungerar snabbare än en bokmärkesapplet och kräver inga tillägg.

Vi går igenom hela cykeln steg för steg: från att öppna panelen Snippets till färdiga arbetskopior du kan använda själv.

💡 Snabb överblick:

• Öppna panelen Snippets via fliken Sources eller kommandomenyn
• Skapa en ny snippet och ge den ett meningsfullt namn
• Skriv JavaScript i kodredigeraren och spara med Ctrl+S
• Kör snippet:en med knappen Run eller via kommandomenyn med !
• Gå igenom praktiska exempel: rensa en sida, samla in data, ändra stilar

Vad snippets är och varför du behöver dem

En snippet är ett fragment av JavaScript som sparas direkt i Chrome DevTools. Till skillnad från kod i konsolen försvinner den inte när du laddar om sidan eller stänger webbläsaren; den ligger på fliken Sources och väntar på att köras.

Den främsta fördelen jämfört med konsolen: en snippet körs i den aktuella sidans kontext och har full åtkomst till dess DOM, variabler och API:er. Du kan skriva ett skript för att extrahera data från vilken webbplats som helst, ändra layout eller automatisera rutinuppgifter och köra det när du vill utan att skriva om det.

Ett alternativt tillvägagångssätt är bokmärkesappletter (bokmärken med javascript: i URL:en), men de begränsas av URL-längd och är opraktiska för flerradskod. I Firefox var motsvarigheten Scratchpad, men den togs bort från webbläsaren från och med version 70 och ersattes med den flerradiga konsolredigeraren.

Se den här korta videohandledningen om snippets; den är på engelska, men alla åtgärder visas på skärmen och matchar fullt ut stegen som beskrivs nedan.

Så här ser ett typiskt snippet-arbetsflöde ut: skärmbilden visar den ursprungliga sidan till vänster och koden i redigeraren till höger.

Källkoden från det här exemplet gör tre saker: loggar ett meddelande till konsolen, rensar document.body och infogar ett nytt stycke:

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);

Efter körning ändras sidan helt: Hello, Snippets! visas i konsolen, och body-innehållet ersätts med ett enda stycke.

Så öppnar du panelen snippets

Panelen Snippets finns inuti fliken Sources. Det finns två sätt att komma dit: med musen och via kommandomenyn.

Metod ett: med musen

Öppna DevTools (F12 eller Ctrl+Shift+I) och gå till fliken Sources. Till vänster ser du panelen Page med sidans filträd; den är öppen som standard.

Klicka på fliken Snippets i samma vänsterkolumn. Om fliken inte syns, klicka på pilen för More tabs (>>); då öppnas en rullgardinslista med dolda flikar, inklusive Snippets.

Metod två: kommandomenyn

Kommandomenyn är det snabbaste sättet att navigera i DevTools om du kommer ihåg kortkommandot.

• Placera fokus var som helst i DevTools.
• Tryck Ctrl+Shift+P (Windows/Linux) eller Cmd+Shift+P (Mac) för att öppna kommandomenyn.
• Börja skriva snippets och välj Show Snippets, tryck sedan på Enter.

Skapa en ny snippet

Panelen Snippets är öppen; nu lägger vi till det första skriptet.

Via panelen Sources

Klicka på knappen New snippet i panelen Snippets. Ange snippetens namn och tryck Enter; den visas i listan till vänster.

Namnet bör vara meningsfullt; om en månad kommer du inte ihåg vad snippet-3 gör. Skriv "rensa-sida-och-logg", "hämta-produktpriser" eller "växla-mörkt-läge".

Via kommandomenyn

Samma kortkommando Ctrl+Shift+P / Cmd+Shift+P, men skriv nu snippet och välj Create new snippet, sedan Enter.

Den nya snippet:en skapas med ett standardnamn; byt namn genom att högerklicka och välja Rename.

Redigera snippet-kod

Klicka på snippet-namnet i den vänstra panelen; kodredigeraren öppnas till höger. Detta är en fullfjädrad editor med syntaxmarkering, radnummer och autokomplettering för JavaScript.

Skriv kod precis som i vilken editor som helst. Alla vanliga webbläsar-API:er är tillgängliga: objekten document och window, funktionerna fetch och console, lagringen localStorage. Hela den uppsättning som sidan ser.

När koden inte är sparad visas en asterisk bredvid snippet-namnet. Spara: Ctrl+S (Windows/Linux) eller Cmd+S (Mac).

Använd Ctrl+Z / Cmd+Z för att ångra; ändringshistoriken fungerar under redigeringssessionen.

Köra en snippet

Med knappen Run i panelen Sources

Öppna önskad snippet i redigeraren. Klicka på knappen Run (play-ikonen) längst ner i panelen:

Eller tryck Ctrl+Enter (Windows/Linux) / Cmd+Enter (Mac). Snippet:en körs i kontexten av den för tillfället öppna sidan.

Via kommandomenyn med ett utropstecken

Öppna kommandomenyn (Ctrl+Shift+P / Cmd+Shift+P), radera symbolen >, skriv ! och börja ange snippet-namnet. DevTools visar matchande alternativ:

Välj den du behöver och tryck Enter. Den här metoden är praktisk när du inte vill byta till fliken Sources.

Byta namn och ta bort

Båda operationerna görs från panelen Snippets genom att högerklicka på snippet-namnet:

• Rename: ange ett nytt namn,
• Remove: ta bort snippet:en permanent.

Borttagning frågar inte efter bekräftelse, så var försiktig. Innan du tar bort ett komplext skript, kopiera koden till en textfil.

Praktiska snippet-exempel

Vi har gått igenom teorin; här är nu flera färdiga skript som du kan kopiera, spara som en snippet och använda direkt.

Rensa en sida för en skärmdump

Tar bort allt innehåll och lägger in en ren vit bakgrund, användbart när du tar skärmdumpar för en portfölj eller dokumentation:

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

Samla alla länkar från en sida

Extraherar alla URL:er och skriver ut dem i konsolen som en lista. Användbart för att granska en sida eller samla in 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örkt läge på valfri webbplats

Applicerar invertering på hela sidan, fungerar även där det inte finns något inbyggt 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)');

Markera alla knappar på en sida

Ritar en röd ram runt varje <button> och input[type="submit"], praktiskt för att kontrollera layouten:

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

Alla dessa snuttar kan kombineras och byggas ut för dina egna uppgifter. Spara en gång, använd i åratal.

⁉️🤔 Vanliga frågor

Var lagras Chrome DevTools snippets fysiskt?

Snippets lagras i Chrome-profilen i filen Preferences (JSON) på sökvägen %LocalAppData%\Google\Chrome\User Data\Default\Preferences i Windows eller ~/Library/Application Support/Google/Chrome/Default/Preferences på Mac. De synkroniseras INTE via ett Google-konto; när du byter dator eller ominstallerar webbläsaren försvinner snippets. För att överföra dem manuellt, kopiera sektionen devtools.preferences.snippets från en Preferences-fil till en annan medan webbläsaren är stängd.

Hur skiljer sig en snippet från ett bokmärkesskript?

Ett bokmärkesskript är ett bokmärke med en URL som börjar med javascript:, begränsat av URL-storlek (cirka 2000 tecken) och besvärligt att redigera. En snippet är en fullfjädrad editor inuti DevTools utan längdbegränsningar, med syntaxmarkering och beständighet mellan sessioner. En snippet kan också köras med kortkommandot Ctrl+Enter utan att du behöver lyfta händerna från tangentbordet.

Kan man köra en snippet automatiskt vid sidladdning?

Inte direkt. En snippet kräver alltid manuell körning. Om du behöver automatisering vid laddning, använd ett Chrome-tillägg (content script) eller Tampermonkey/Violentmonkey med användarskript; de aktiveras vid en sidladdningstrigger och kräver ingen manuell åtgärd.

Hur säkerhetskopierar jag mina snippets innan jag ominstallerar Chrome?

Öppna DevTools, gå till Sources → Snippets, högerklicka på varje snippet och välj Save as; detta sparar en .js-fil till disk. Alternativt, öppna chrome://version/, leta reda på profilsökvägen, stäng Chrome och kopiera JSON-sektionen devtools.preferences.snippets från Preferences-filen.

Varför ser min snippet inte variabler från konsolen?

En snippet körs i sitt eget scope; den har inte tillgång till variabler som deklarerats i konsolen via var/let/const i det globala scopet. För att skicka data, tilldela ett värde direkt till window: window.myData = {...} i konsolen, läs sedan window.myData i snippet:en. Eller tvärtom: snippet:en kan sätta data på window, och konsolen kan läsa den.

Är det värt att lära sig snippets 2026?

Snippets är ett av de verktyg som inte förändras på flera år men som radikalt snabbar upp rutinarbete om du inte glömmer bort dem. Fem minuter som läggs på att skapa ett skript för att samla in länkar eller rensa en sida sparar dussintals manuella operationer varje månad.

Börja med tre enkla snippets: samla in data från tabeller på en sida, snabb DOM-rensning för skärmdumpar och markering av ett element via selektor. Spara dem, så är du klar på sekunder nästa gång du behöver extrahera data från en tredjepartssajt eller kontrollera layouten, istället för att lägga en halvtimme på att kopiera och klistra.

Kom bara ihåg att säkerhetskopiera: snippets synkroniseras inte mellan enheter, och utan en kopia av Preferences-filen försvinner de när du ominstallerar systemet.