JavaScript-Snippets ausführen

Wenn Sie denselben Code wiederholt in der Console ausführen, sollten Sie den Code 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 verfassen und sie auf jeder Seite im Inkognitomodus ausführen.

Im Screenshot unten ist zum Beispiel links die Startseite der Entwicklertools-Dokumentation und rechts im Bereich Quellen > Snippets ein Teil des Quellcode-Snippets zu sehen.

Hier sehen Sie den Snippet-Quellcode, der eine Nachricht protokolliert und den HTML-Text 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 die Console-Leiste eingeblendet. Hier sehen Sie die Hello, Snippets!-Meldung, die vom Snippet protokolliert und der Inhalt der Seite ändert.

Snippets-Bereich öffnen

Im Bereich Snippets werden die Snippets aufgelistet. Zum Bearbeiten eines Snippets haben Sie zwei Möglichkeiten, es zu öffnen:

1. Gehen Sie zu Quellen > > Snippets.

   

2. Über das Befehlsmenü:

   1. Drücken Sie Strg + Umschalttaste + P (Windows/Linux) oder Befehlstaste + Umschalt + P (Mac), um das Befehlstaste zu öffnen.
   2. Geben Sie die ersten Buchstaben von 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, die in diesem Beispiel leer ist.

Snippets erstellen

Snippets lassen sich im Bereich Snippets oder durch Ausführen des entsprechenden Befehls über das Befehlsmenü in den Entwicklertools erstellen.

Im Bereich Snippets sind Ihre Snippets alphabetisch 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.

   

Snippet über das Befehlsmenü erstellen

1. Bewegen Sie den Cursor an eine beliebige Stelle innerhalb der Entwicklertools.
2. Drücken Sie Strg + Umschalttaste + P (Windows/Linux) oder Befehlstaste + Umschalt + P (Mac), um das Befehlstaste zu öffnen.

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

   

Unter Snippets umbenennen können Sie dem neuen Snippet einen benutzerdefinierten Namen geben.

Snippets bearbeiten

1. Öffnen Sie den Bereich Snippets.

2. Klicken Sie im Bereich Snippets auf den Namen des Snippets, das Sie bearbeiten möchten. Der Bereich Quellen wird im Codeeditor geöffnet.

   

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

   

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

Snippets ausführen

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

Snippet im Quellenbereich ausführen

1. Öffnen Sie den Bereich Snippets.
2. Klicken Sie auf den Namen des Snippets, das Sie ausführen möchten. Der Bereich Quellen wird im Codeeditor geöffnet.

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

   

Snippet über das Befehlsmenü ausführen

1. Bewegen Sie den Cursor an eine beliebige Stelle innerhalb der Entwicklertools.
2. Drücken Sie Strg + O (Windows/Linux) oder Befehlstaste + O (Mac), um das Befehlstaste 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 Namen des Snippets und wählen Sie Umbenennen aus.

Snippets löschen

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