JavaScript-Snippets ausführen

Kayce Basques

Sofia Emelianova

Wenn Sie denselben Code wiederholt in der Konsole 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 Quellen-Bereich erstellen und auf jeder Seite und im Inkognitomodus ausführen.

Hinweis: In den Entwicklertools werden Snippets als lokale Einstellungen gespeichert. Die Entwicklertools synchronisieren Snippets nicht mit den Einstellungen und sie können nicht über das Dateisystem aufgerufen werden.

Der Screenshot unten zeigt beispielsweise links die Startseite der Entwicklertools-Dokumentation und rechts im Bereich Quellen > Snippets den Quellcode eines Snippets.

Hier ist der Quellcode des Snippets, 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 den Button Ausführen klicken, wird die Konsole eingeblendet, um die Nachricht Hello, Snippets! anzuzeigen, die das Snippet protokolliert, und der Inhalt der Seite ändert sich.

Bereich „Snippets“ öffnen

Im Bereich Snippets werden Ihre Snippets aufgelistet. Wenn Sie ein Snippet bearbeiten möchten, öffnen Sie es auf eine der folgenden Arten:

1. Rufen Sie Quellen >  > Snippets auf.

   

2. Über das Befehlsmenü:

   1. Drücken Sie Strg + Umschalttaste + P (Windows/Linux) oder Befehlstaste + Umschalttaste + 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 wird eine Liste der gespeicherten Snippets angezeigt. In diesem Beispiel ist sie leer.

Snippets erstellen

Sie können Snippets im Bereich Snippets oder durch Ausführen des entsprechenden Befehls im Befehlsmenü an einer beliebigen Stelle in den DevTools erstellen.

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 die Eingabetaste, um es zu speichern.

   

Snippet über das Befehlsmenü erstellen

1. Setzen Sie den Cursor an eine beliebige Stelle in den Entwicklertools.
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 dem neuen Snippet einen benutzerdefinierten Namen geben möchten, lesen Sie den Abschnitt 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 unter Windows/Linux Strg + S und auf einem Mac Befehlstaste + S.

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 in der Aktionsleiste unten im Editor auf Ausführen oder drücken Sie Strg+Eingabetaste (Windows/Linux) bzw. Befehlstaste+Eingabetaste (Mac).

   

Snippet über das Befehlsmenü ausführen

1. Setzen Sie den Cursor an eine beliebige Stelle in den Entwicklertools.
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. Rechtsklicken Sie auf den Snippet-Namen und wählen Sie Umbenennen aus.

Snippets löschen

1. Öffnen Sie den Bereich Snippets.
2. Rechtsklicken Sie auf den Namen des Snippets und wählen Sie Entfernen aus.