JavaScript-Snippets ausführen

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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 erstellen und auf jeder Seite sowie im Inkognitomodus verwenden.

Im Screenshot unten sehen Sie beispielsweise links die Startseite der Entwicklertools-Dokumentation und rechts einen Snippet-Quellcode im Bereich Quellen > Snippets.

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

Hier sehen Sie den Quellcode des Snippets, mit dem einige Nachrichten protokolliert werden und der HTML-Text 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 die Leiste Konsole eingeblendet und enthält die Hello, Snippets!-Meldung, die vom Snippet protokolliert wird, und den Inhalt der Seite.

Die Startseite nach Ausführung des Snippets.

Bereich „Snippets“ öffnen

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

  1. Gehen Sie zu Quellen > Mehr Tabs. > Snippets.

    Das Menü „Weitere Tabs“ im Bereich „Quellen“

  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 die ersten Buchstaben von Snippets ein, wählen Sie Snippets anzeigen aus und drücken Sie die Eingabetaste.

    Wählen Sie im Befehlsmenü die Option Snippets anzeigen aus.

Im Bereich Quellen>Snippets wird eine Liste der gespeicherten Snippets angezeigt, die in diesem Beispiel leer ist.

Ein leerer Ausschnitt-Bereich.

Snippets erstellen

Sie können Snippets im Bereich Snippets erstellen oder den entsprechenden Befehl irgendwo in den Entwicklertools über das Befehlsmenü 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.

    Ein Snippet benennen

Snippet über das Befehlsmenü erstellen

  1. Bewege den Cursor auf eine beliebige Stelle innerhalb der Entwicklertools.
  2. Drücken Sie Strg + Umschalttaste + P (Windows/Linux) oder Befehlstaste + Umschalt + 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.

Unter Snippets umbenennen können Sie Ihrem 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.

    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 die Befehlstaste + S (Mac).

Snippets ausführen

Ähnlich wie bei der Erstellung eines Snippets können Sie dieses 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. Der Bereich Quellen wird im Codeeditor geöffnet.

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

    Über die Schaltfläche „Ausführen“

Snippet über das Befehlsmenü ausführen

  1. Bewege den Cursor auf eine beliebige Stelle innerhalb der Entwicklertools.
  2. Drücken Sie Strg + O (Windows/Linux) oder die 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.

    Snippet über das geöffnete Menü 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 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 Snippet-Namen und wählen Sie Entfernen aus.