JavaScript-Snippets ausführen

Kayce Basques
Kayce Basques
X GitHub
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 Lesezeichen-Apps.

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

Auf dem Screenshot unten sehen Sie beispielsweise links die Startseite der Entwicklertools-Dokumentation und rechts den Quellcode eines Snippets im Bereich Quellen> Snippets.

Die Startseite der DevTools-Dokumentation vor dem Ausführen des Snippets. 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 Konsolenbereich eingeblendet, in dem die Hello, Snippets!-Meldung angezeigt wird, die vom Snippet protokolliert wird, und der Inhalt der Seite ändert sich.

Die Startseite nach Ausführung des Snippets.

Bereich „Snippets“ öffnen

Im Bereich Snippets werden Ihre Snippets aufgeführt. So bearbeiten Sie einen Snippet:

  1. Rufen Sie Quellen > Mehr Tabs. > Snippets auf.

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

  2. Über das Befehlsmenü:

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

    Auswahl von „Snippets anzeigen“ im Befehlsmenü.

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

Ein leerer Bereich „Snippets“.

Snippets erstellen

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

Im Bereich Snippets werden Ihre Snippets in alphabetischer Reihenfolge sortiert.

Snippet im Quellenbereich erstellen

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

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

    Snippet benennen

Snippet über das Befehlsmenü erstellen

  1. Platzieren Sie den Cursor an einer beliebigen Stelle in den Entwicklertools.
  2. Drücken Sie Strg + Umschalt + P (Windows/Linux) oder Befehlstaste + Umschalt + P (Mac), um das Befehlsmenü zu öffnen.

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

    Wählen Sie im Befehlsmenü „Neuen Snippet erstellen“ aus.

Unter Snippets umbenennen erfahren Sie, wie 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. Im Bereich Quellen wird die Datei im Code-Editor geöffnet.

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

  3. Verwenden Sie den Code-Editor, um 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 Quellenbereich 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 die Datei im Code-Editor 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).

    Die Schaltfläche „Ausführen“

Snippet über das Befehlsmenü ausführen

  1. Platzieren Sie den Cursor an einer beliebigen 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.

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

  4. Drücken Sie die Eingabetaste, um den 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 Rename (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.