Haben Sie bemerkt, dass Sie immer wieder denselben JavaScript-Code in die DevTools-Konsole kopieren? Ein Debugging-Snippet, das Extrahieren von Daten aus einer Seite, eine schnelle DOM-Änderung, und jedes Mal müssen Sie es manuell eintippen oder aus einem Notizblock einfügen.

Die Chrome DevTools verfügen seit mehreren Jahren über einen integrierten Snippet-Editor direkt im Tab „Sources". Sie schreiben das Skript einmal, geben ihm einen Namen und führen es mit einem einzigen Klick oder Shortcut auf jeder beliebigen Seite aus. Das funktioniert schneller als ein Bookmarklet und erfordert keine Erweiterungen.

Wir gehen den gesamten Ablauf Schritt für Schritt durch: vom Öffnen des Snippets-Bereichs bis hin zu einsatzbereiten Arbeitsbeispielen, die Sie für sich übernehmen können.

💡 Kurzüberblick:

• Öffnen Sie den Snippets-Bereich über den Tab „Sources" oder das Befehlsmenü
• Erstellen Sie ein neues Snippet und vergeben Sie einen aussagekräftigen Namen
• Schreiben Sie JavaScript im Code-Editor und speichern Sie mit Ctrl+S
• Führen Sie das Snippet über die Schaltfläche „Run" oder das Befehlsmenü mit ! aus
• Gehen Sie praktische Beispiele durch: eine Seite leeren, Daten sammeln, Stile ändern

Was Snippets sind und wozu Sie sie brauchen

Ein Snippet ist ein JavaScript-Fragment, das direkt in den Chrome DevTools gespeichert wird. Anders als Code in der Konsole verschwindet es nicht, wenn Sie die Seite neu laden oder den Browser schließen; es liegt im Tab „Sources" bereit und wartet auf die Ausführung.

Der Hauptvorteil gegenüber der Konsole: Ein Snippet wird im Kontext der aktuellen Seite ausgeführt und hat vollen Zugriff auf deren DOM, Variablen und APIs. Sie können ein Skript schreiben, um Daten von einer beliebigen Website zu extrahieren, das Layout zu verändern oder Routineaufgaben zu automatisieren, und es jederzeit ausführen, ohne es erneut eintippen zu müssen.

Ein alternativer Ansatz sind Bookmarklets (Lesezeichen mit javascript: in der URL), diese sind jedoch durch die URL-Länge begrenzt und für mehrzeiligen Code unpraktisch. In Firefox war das Äquivalent die Scratchpad-Umgebung, die jedoch ab Version 70 aus dem Browser entfernt und durch den mehrzeiligen Konsolen-Editor ersetzt wurde.

Sehen Sie sich dieses kurze Video-Tutorial zu Snippets an; es ist auf Englisch, aber alle Aktionen werden auf dem Bildschirm gezeigt und decken sich vollständig mit den nachfolgend beschriebenen Schritten.

So sieht ein typischer Snippet-Workflow aus: Der Screenshot zeigt links die ursprüngliche Seite und rechts den Code im Editor.

Der Quellcode aus diesem Beispiel erledigt drei Dinge: Er protokolliert eine Nachricht in der Konsole, leert document.body und fügt einen neuen Absatz ein:

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

Nach der Ausführung ändert sich die Seite vollständig: In der Konsole erscheint Hello, Snippets!, und der Inhalt des Body wird durch einen einzelnen Absatz ersetzt.

So öffnen Sie den Snippets-Bereich

Der Snippets-Bereich befindet sich im Tab „Sources". Es gibt zwei Wege dorthin: mit der Maus und über das Befehlsmenü.

Methode eins: mit der Maus

Öffnen Sie die DevTools (F12 oder Ctrl+Shift+I) und wechseln Sie zum Tab Sources. Links sehen Sie das Page-Panel mit der Dateistruktur der Seite; es ist standardmäßig geöffnet.

Klicken Sie in derselben linken Spalte auf den Tab Snippets. Falls der Tab nicht sichtbar ist, klicken Sie auf den Pfeil More tabs (>>); es öffnet sich eine Dropdown-Liste mit ausgeblendeten Tabs, darunter auch Snippets.

Methode zwei: Befehlsmenü

Das Befehlsmenü ist der schnellste Weg, um in den DevTools zu navigieren, wenn Sie sich die Tastenkombination merken.

• Setzen Sie den Fokus an eine beliebige Stelle innerhalb der DevTools.
• Drücken Sie Ctrl+Shift+P (Windows/Linux) oder Cmd+Shift+P (Mac), um das Befehlsmenü zu öffnen.
• Beginnen Sie, snippets einzutippen, wählen Sie Show Snippets aus und drücken Sie Enter.

Ein neues Snippet anlegen

Das Snippets-Panel ist geöffnet; nun legen wir das erste Skript an.

Über das Sources-Panel

Klicken Sie im Snippets-Panel auf die Schaltfläche New snippet. Geben Sie den Namen des Snippets ein und drücken Sie Enter; es erscheint in der Liste auf der linken Seite.

Der Name sollte aussagekräftig sein; in einem Monat werden Sie nicht mehr wissen, was snippet-3 tut. Schreiben Sie zum Beispiel "clear-page-and-log", "extract-product-prices" oder "toggle-dark-mode".

Über das Befehlsmenü

Dieselbe Tastenkombination Ctrl+Shift+P / Cmd+Shift+P, aber tippen Sie nun snippet ein, wählen Sie Create new snippet und dann Enter.

Das neue Snippet wird mit einem Standardnamen angelegt; benennen Sie es um, indem Sie mit der rechten Maustaste darauf klicken und Rename wählen.

Snippet-Code bearbeiten

Klicken Sie im linken Panel auf den Snippet-Namen; rechts öffnet sich der Code-Editor. Dies ist ein voll ausgestatteter Editor mit Syntaxhervorhebung, Zeilennummern und Autovervollständigung für JavaScript.

Schreiben Sie Code wie in jedem anderen Editor. Alle standardmäßigen Browser-APIs stehen zur Verfügung: die Objekte document und window, die Funktionen fetch und console, der Speicher localStorage. Der gesamte Satz dessen, was die Seite sieht.

Wenn der Code nicht gespeichert ist, erscheint ein Sternchen neben dem Snippet-Namen. Speichern: Ctrl+S (Windows/Linux) oder Cmd+S (Mac).

Verwenden Sie Ctrl+Z / Cmd+Z zum Rückgängigmachen; der Änderungsverlauf funktioniert innerhalb der Bearbeitungssitzung.

Ein Snippet ausführen

Mit der Schaltfläche „Run" im Sources-Panel

Öffnen Sie das gewünschte Snippet im Editor. Klicken Sie unten im Panel auf die Schaltfläche Run (Play-Symbol):

Oder drücken Sie Ctrl+Enter (Windows/Linux) / Cmd+Enter (Mac). Das Snippet wird im Kontext der aktuell geöffneten Seite ausgeführt.

Über das Befehlsmenü mit einem Ausrufezeichen

Öffnen Sie das Befehlsmenü (Ctrl+Shift+P / Cmd+Shift+P), löschen Sie das >-Symbol, geben Sie ! ein und beginnen Sie, den Snippet-Namen einzutippen. Die DevTools zeigen passende Vorschläge an:

Wählen Sie den gewünschten aus und drücken Sie Enter. Diese Methode ist praktisch, wenn Sie nicht zum Sources-Tab wechseln möchten.

Umbenennen und Löschen

Beide Vorgänge führen Sie im Snippets-Panel aus, indem Sie mit der rechten Maustaste auf den Snippet-Namen klicken:

• Rename: einen neuen Namen vergeben,
• Remove: das Snippet dauerhaft löschen.

Das Löschen erfolgt ohne Bestätigungsabfrage, seien Sie also vorsichtig. Bevor Sie ein komplexes Skript löschen, kopieren Sie den Code in eine Textdatei.

Praktische Snippet-Beispiele

Die Theorie haben wir behandelt; hier folgen nun einige fertige Skripte, die Sie kopieren, als Snippet speichern und sofort verwenden können.

Eine Seite für einen Screenshot bereinigen

Entfernt sämtlichen Inhalt und fügt einen sauberen weißen Hintergrund ein, nützlich für Screenshots für ein Portfolio oder eine Dokumentation:

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

Alle Links einer Seite sammeln

Extrahiert sämtliche URLs und gibt sie als Liste in der Konsole aus. Nützlich für die Prüfung einer Seite oder die Datenerfassung:

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

Dark Mode auf jeder Website

Wendet eine Invertierung auf die gesamte Seite an und funktioniert auch dort, wo kein eingebautes dunkles Design vorhanden ist:

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

Alle Schaltflächen einer Seite hervorheben

Umrandet jedes <button>- und input[type="submit"]-Element mit einem roten Rahmen, praktisch für die Layout-Prüfung:

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

All diese Snippets lassen sich kombinieren und für eigene Aufgaben erweitern. Einmal speichern, jahrelang nutzen.

⁉️🤔 Häufig gestellte Fragen

Wo werden Chrome-DevTools-Snippets physisch gespeichert?

Snippets werden im Chrome-Profil in der Datei Preferences (JSON) abgelegt, und zwar unter dem Pfad %LocalAppData%\Google\Chrome\User Data\Default\Preferences unter Windows oder ~/Library/Application Support/Google/Chrome/Default/Preferences auf dem Mac. Sie werden NICHT über ein Google-Konto synchronisiert; bei einem Rechnerwechsel oder einer Neuinstallation des Browsers gehen Snippets verloren. Um sie manuell zu übertragen, kopieren Sie bei geschlossenem Browser den Abschnitt devtools.preferences.snippets aus einer Preferences-Datei in die andere.

Worin unterscheidet sich ein Snippet von einem Bookmarklet?

Ein Bookmarklet ist ein Lesezeichen mit einer URL, die mit javascript: beginnt, durch die URL-Länge begrenzt ist (etwa 2000 Zeichen) und sich umständlich bearbeiten lässt. Ein Snippet ist ein vollwertiger Editor innerhalb der DevTools ohne Längenbeschränkung, mit Syntaxhervorhebung und Persistenz zwischen Sitzungen. Ein Snippet lässt sich zudem mit dem Tastenkürzel Ctrl+Enter ausführen, ohne die Hände von der Tastatur zu nehmen.

Kann man ein Snippet automatisch beim Seitenaufruf ausführen?

Nicht direkt. Ein Snippet erfordert stets eine manuelle Ausführung. Benötigen Sie eine Automatisierung beim Laden, nutzen Sie eine Chrome-Erweiterung (Content Script) oder Tampermonkey/Violentmonkey mit Userscripts; diese werden durch einen Seitenaufruf-Trigger ausgelöst und erfordern keinen manuellen Eingriff.

Wie sichere ich meine Snippets vor einer Chrome-Neuinstallation?

Öffnen Sie die DevTools, gehen Sie zu Quellen → Snippets, klicken Sie mit der rechten Maustaste auf jedes Snippet und wählen Sie Speichern unter; dadurch wird eine .js-Datei auf der Festplatte gespeichert. Alternativ öffnen Sie chrome://version/, ermitteln den Profilpfad, schließen Chrome und kopieren den JSON-Abschnitt devtools.preferences.snippets aus der Preferences-Datei.

Warum sieht mein Snippet keine Variablen aus der Konsole?

Ein Snippet wird in einem eigenen Gültigkeitsbereich ausgeführt; es hat keinen Zugriff auf Variablen, die in der Konsole per var/let/const im globalen Bereich deklariert wurden. Um Daten zu übergeben, weisen Sie einen Wert direkt window zu: window.myData = {...} in der Konsole, und lesen Sie dann window.myData im Snippet. Oder umgekehrt: Das Snippet kann Daten auf window ablegen, und die Konsole kann sie auslesen.

Lohnt es sich, Snippets im Jahr 2026 zu lernen?

Snippets gehören zu jenen Werkzeugen, die sich über Jahre nicht verändern, aber Routinearbeit radikal beschleunigen, sofern man sie nicht vergisst. Fünf Minuten, die Sie in ein Skript zum Sammeln von Links oder zum Bereinigen einer Seite investieren, sparen jeden Monat Dutzende manuelle Arbeitsschritte.

Beginnen Sie mit drei einfachen Snippets: dem Auslesen von Daten aus Tabellen auf einer Seite, dem schnellen DOM-Bereinigen für Screenshots und dem Hervorheben eines Elements per Selektor. Speichern Sie sie, und wenn Sie das nächste Mal Daten von einer Drittseite extrahieren oder das Layout prüfen müssen, sind Sie in Sekunden fertig, statt eine halbe Stunde mit Copy-and-Paste zu verbringen.

Denken Sie nur an die Sicherung: Snippets werden nicht zwischen Geräten synchronisiert, und ohne eine Kopie der Preferences-Datei verschwinden sie bei einer Systemneuinstallation.