JavaScript-Snippets ausführen

Kayce Basques

Sofia Emelianova

Wenn Sie denselben Code in der Konsole wiederholt ausführen, sollten Sie ihn stattdessen als Snippet speichern. Snippets haben Zugriff auf den JavaScript-Kontext der Seite. Sie sind eine Alternative zu Bookmarklets.

Sie können Snippets im Bereich Quellen erstellen und auf jeder Seite und im Inkognitomodus ausführen.

Hinweis: In den DevTools werden Snippets als lokale Einstellungen gespeichert. In den DevTools werden Snippets nicht mit den Einstellungen synchronisiert und es kann nicht über das Dateisystem darauf zugegriffen werden.

Auf dem Screenshot unten ist beispielsweise die Startseite der DevTools-Dokumentation links und ein Snippet-Quellcode im Bereich Quellen > Snippets rechts zu sehen.

Im folgenden Quellcode des Snippets wird eine Nachricht protokolliert und der HTML-Body der Startseite durch ein <p>-Element ersetzt, das die Nachricht enthält:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

Wenn Sie auf die Schaltfläche Ausführen klicken, wird der Bereich Console geöffnet. Daraufhin wird die Hello, Snippets!-Nachricht angezeigt, die vom Snippet protokolliert wird, und der Inhalt der Seite ändert sich.

Bereich „Snippets“ öffnen

Im Bereich Snippets werden Ihre Snippets aufgeführt. Sie haben zwei Möglichkeiten, ein Snippet zu bearbeiten:

1. Gehe zu Quellen >  > Snippets.

   

2. Über das Befehlsmenü:

   1. Drücken Sie Strg + Umschalttaste + P (Windows/Linux) oder Befehlstaste + Umschalt + P (Mac), um das Befehlsmenü zu öffnen.
   2. Geben Sie Snippets ein, wählen Sie Snippets anzeigen aus und drücken Sie die Eingabetaste.

   

Im Bereich Quellen > Snippets sehen Sie eine Liste der von Ihnen gespeicherten Snippets. In diesem Beispiel ist er leer.

Snippets erstellen

Sie können Snippets im Bereich Snippets erstellen oder den entsprechenden Befehl über das Befehlsmenü an einer beliebigen Stelle in DevTools ausführen.

Im Bereich Snippets werden Ihre Snippets in alphabetischer Reihenfolge sortiert.

Snippet im Bereich „Quellen“ erstellen

1. Öffnen Sie den Bereich Snippets.
2. Klicken Sie auf  Neues Snippet.

3. Geben Sie einen Namen für das Snippet ein und drücken Sie zum Speichern die Eingabetaste.

   

Snippets über das Befehlsmenü erstellen

1. Bewegen Sie den Cursor auf eine beliebige Stelle in den DevTools.
2. Drücken Sie Strg + Umschalttaste + P (Windows/Linux) oder Befehlstaste + Umschalttaste + P (Mac), um das Befehlsmenü zu öffnen.

3. Geben Sie Snippet ein, wählen Sie Neues Snippet erstellen aus und drücken Sie die Eingabetaste, um den Befehl auszuführen.

   

Wenn Sie Ihrem neuen Snippet einen benutzerdefinierten Namen geben möchten, lesen Sie den Hilfeartikel Snippets umbenennen.

Snippets bearbeiten

1. Öffnen Sie den Bereich Snippets.

2. Klicken Sie im Bereich Snippets auf den Namen des Snippets, das Sie bearbeiten möchten. Im Bereich Quellen wird sie im Code-Editor geöffnet.

   

3. Verwenden Sie den Code-Editor, um den Code in Ihrem Snippet zu bearbeiten. Ein Sternchen neben dem Snippet-Namen bedeutet, dass Sie Ihre Änderungen noch nicht gespeichert haben.

   

4. Drücken Sie zum Speichern Strg + S (Windows/Linux) oder die Befehlstaste + S (Mac).

Snippets ausführen

Ähnlich wie beim Erstellen eines Snippets können Sie es sowohl im Bereich Snippets als auch über das Befehlsmenü ausführen.

Snippet im Bereich „Quellen“ ausführen

1. Öffnen Sie den Bereich Snippets.
2. Klicken Sie auf den Namen des Snippets, das Sie ausführen möchten. Im Bereich Quellen wird sie im Code-Editor geöffnet.

3. Klicken Sie unten im Editor in der Aktionsleiste auf  Ausführen oder drücken Sie Strg + Eingabetaste (Windows/Linux) oder Befehlstaste + Eingabetaste (Mac).

   

Snippets über das Befehlsmenü ausführen

1. Bewegen Sie den Cursor auf eine beliebige Stelle in den DevTools.
2. Drücken Sie Strg + O (Windows/Linux) oder Befehlstaste + O (Mac), um das Befehlsmenü zu öffnen.

3. Geben Sie das Zeichen ! gefolgt vom Namen des Snippets ein, das Sie ausführen möchten.

   

4. Drücken Sie die Eingabetaste, um das Snippet auszuführen.

Snippets umbenennen

1. Öffnen Sie den Bereich Snippets.
2. Klicken Sie mit der rechten Maustaste auf den Snippet-Namen und wählen Sie Umbenennen aus.

Snippets löschen

1. Öffnen Sie den Bereich Snippets.
2. Klicken Sie mit der rechten Maustaste auf den Snippet-Namen und wählen Sie Entfernen aus.