JavaScript-Snippets ausführen

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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.

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

Die Startseite der DevTools-Dokumentation, bevor das Snippet ausgeführt wird. Die Schaltfläche „Ausführen“ ist hervorgehoben.

Hier ist der Quellcode des Snippets, mit dem eine Nachricht protokolliert und der HTML-Body der Startseite durch ein <p>-Element ersetzt wird, 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 Run vergleichbar. Ausführen klicken, wird der Bereich Console eingeblendet. Dort sehen Sie die Hello, Snippets!-Nachricht, die vom Snippet protokolliert wird, und der Inhalt der Seite ändert sich.

Die Startseite nach dem Ausführen des Snippets.

Bereich „Snippets“ öffnen

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

  1. Gehe zu Quellen > Mehr Tabs. > Snippets.

    Das Dreipunkt-Menü im Bereich „Quellen“.

  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 Befehlsmenü „Snippets anzeigen“ auswählen

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

Ein leerer Snippet-Bereich.

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 Neues Snippet.

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

    Snippet benennen

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.

    Wählen Sie im Befehlsmenü die Option „Neues Snippet erstellen“ aus.

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.

    Ein Snippet, das im Code-Editor geöffnet wurde.

  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.

    Ein Sternchen neben dem Snippet-Namen, das auf nicht gespeicherten Code hinweist.

  4. Drücken Sie zum Speichern Strg + S (Windows/Linux) oder 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 Run vergleichbar. Ausführen oder drücken Sie Strg + Eingabetaste (Windows/Linux) oder Befehlstaste + Eingabetaste (Mac).

    Die Schaltfläche „Ausführen“.

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.

    Snippets über das Menü „Öffnen“ ausführen

  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.