Freigeben über

Ausführen von JavaScript-Codeausschnitten auf einer beliebigen Webseite

Wenn Sie denselben Code wiederholt in das Konsolentool eingeben, sollten Sie den Code stattdessen als Codeausschnitt speichern und dann den Codeausschnitt ausführen. Codeausschnitte sind Skripts, die Sie im Tool Quellen erstellen. Codeausschnitte haben Zugriff auf den JavaScript-Kontext der Webseite, und Sie können Codeausschnitte auf jeder beliebigen Webseite ausführen. Codeausschnitte können verwendet werden, um eine Webseite zu ändern, z. B. um deren Inhalt oder Darstellung zu ändern oder Um Daten zu extrahieren.

Der folgende Screenshot zeigt Microsoft Edge mit einer Webseite auf der linken Seite und DevTools auf der rechten Seite. Das Tool Quellen ist geöffnet und zeigt den Quellcode des Ausschnitts an, der auf der Registerkarte Codeausschnitte ausgewählt ist. Der Codeausschnitt wurde ausgeführt, wobei Änderungen an der Webseite vorgenommen wurden:

Die Webseite, die durch den Codeausschnitt geändert wurde

Der Codeausschnittquellcode ist unten dargestellt:

// Change the background color to "dimgrey".
document.body.style.backgroundColor = "dimgrey";

// Add a paragraph at the bottom of the document.
const p = document.createElement("p");
p.textContent = "Hello world";
p.style.color = "white";
p.style.fontSize = "2rem";
document.body.appendChild(p);

// Log a message to the console.
console.log("Hello world");

Der Code ändert die Hintergrundfarbe der Webseite in dimgrey, fügt eine neue Textzeile am unteren Rand der Webseite hinzu und protokolliert eine Meldung im Konsolentool .

Wenn Sie einen Codeausschnitt auf einer Webseite ausführen, wird der Quellcode des Codeausschnitts der aktuellen Webseite hinzugefügt. Weitere Informationen zum Ändern des vorhandenen Codes einer Webseite, anstatt neuen Code hinzuzufügen, finden Sie unter Außerkraftsetzen von Webseitenressourcen mit lokalen Kopien (Registerkarte Außerkraftsetzungen).

Schließen Sie Ihren gesamten Code in einer Datei ein.

Die Sicherheitseinstellungen der meisten Webseiten blockieren das Laden anderer Skripts in Codeausschnitten. Aus diesem Grund müssen Sie Ihren gesamten Code in einer Datei einschließen.

Öffnen der Registerkarte "Codeausschnitte"

Die Registerkarte Codeausschnitte ist mit der Registerkarte Seite im Bereich Navigator auf der linken Seite des Tools Quellen gruppiert.

So öffnen Sie die Registerkarte Codeausschnitte :

  1. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Überprüfen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  2. Wählen Sie in DevTools auf der Aktivitätsleiste die Registerkarte Quellen aus. Wenn diese Registerkarte nicht angezeigt wird, klicken Sie auf die Schaltfläche Weitere Tools (Symbol ").

    Das Tool

  3. Wählen Sie im Bereich Navigator (auf der linken Seite) die Registerkarte Codeausschnitte aus. Um auf die Option Codeausschnitte zuzugreifen, müssen Sie möglicherweise auf die Schaltfläche Weitere Registerkarten (Weitere Registerkarten) klicken.

Öffnen der Registerkarte "Codeausschnitte" im Befehlsmenü

Sie können die Registerkarte Codeausschnitte auch über das Befehlsmenü öffnen:

  1. Wählen Sie in DevTools eine beliebige Option aus, damit DevTools den Fokus hat.

  2. Drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS), um das Befehlsmenü zu öffnen.

  3. Beginnen Sie mit der Eingabe von "Codeausschnitten", wählen Sie Codeausschnitte anzeigen aus, und drücken Sie dann die EINGABETASTE , um den Befehl auszuführen:

    Befehl

Erstellen eines Ausschnitts

Sie können einen Codeausschnitt aus dem Codeausschnitttool erstellen oder den Befehl Neuen Codeausschnitt erstellen im Befehlsmenü an einer beliebigen Stelle in DevTools ausführen.

Im Bereich Codeausschnitte werden Ihre Codeausschnitte in alphabetischer Reihenfolge sortiert.

Erstellen eines Ausschnitts im Quellentool

So erstellen Sie einen neuen Codeausschnitt auf der Registerkarte Codeausschnitte :

  1. Öffnen Sie die Registerkarte Codeausschnitte.

  2. Klicken Sie auf Neuer Codeausschnitt (+).

  3. Geben Sie einen Namen für Ihren Codeausschnitt ein, und drücken Sie dann die EINGABETASTE:

    Ein neuer, leerer Codeausschnitt im Quellentool

Erstellen eines Ausschnitts aus dem Befehlsmenü

  1. Fokus des Cursors an einer beliebigen Stelle in DevTools.

  2. Drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS), um das Befehlsmenü zu öffnen.

  3. Beginnen Sie mit der Eingabe von "snippet", wählen Sie Neuen Codeausschnitt erstellen aus, und drücken Sie dann die EINGABETASTE:

    Der Befehl zum Erstellen eines neuen Ausschnitts

Informationen zum Umbenennen des neuen Codeausschnitts finden Sie weiter unten unter Umbenennen eines Codeausschnitts.

Bearbeiten eines Ausschnitts

So bearbeiten Sie den Quellcode eines Codeausschnitts:

  1. Öffnen Sie die Registerkarte Codeausschnitte.

  2. Klicken Sie auf der Registerkarte Codeausschnitte auf den Namen des Codeausschnitts, den Sie bearbeiten möchten. Der Codeausschnitt wird im Code-Editor geöffnet:

    Code Editor

  3. Verwenden Sie die Code-Editor, um Ihrem Codeausschnitt JavaScript hinzuzufügen.

  4. Wenn neben dem Namen des Codeausschnitts ein Sternchen angezeigt wird, bedeutet dies, dass Sie nicht gespeicherten Code haben. Drücken Sie STRG+S (Windows, Linux) oder BEFEHL+S (macOS), um zu speichern:

    Ein Sternchen neben dem Codeausschnittnamen gibt nicht gespeicherten Code an.

Einfügen in den Codeausschnitt-Editor zulassen

Wenn Sie zum ersten Mal versuchen, Inhalt in den Codeausschnitt-Editor der Registerkarte > "Codeausschnitte" des Tools> "Quellen" einzufügen, anstatt sie einzufügen, wird das Dialogfeld "Vertrauen Sie diesem Code?" mit der folgenden Meldung angezeigt: "Fügen Sie keinen Code ein, den Sie nicht verstehen, oder haben Sie sich selbst nicht in DevTools überprüft. Dies könnte es Angreifern ermöglichen, Ihre Identität zu stehlen oder die Kontrolle über Ihren Computer zu übernehmen. Geben Sie unten 'Allow pasteing' (Einfügen zulassen) ein, um das Einfügen zuzulassen."

Registerkarten-Editor für Codeausschnitte des Quellentools, der die Selbst-XSS-Warnung anzeigt

Diese Warnung trägt dazu bei, selbst siteübergreifende Skriptangriffe (Self-XSS) auf Endbenutzer zu verhindern. Um Code einzufügen, geben Sie zuerst Einfüge zulassen in das Textfeld des Dialogfelds ein, und klicken Sie dann auf die Schaltfläche Zulassen . Fügen Sie dann den Inhalt ein. Oder starten Sie Edge mit dem folgenden Flag.

Das Einfügen in das Konsolentool ist ähnlich. Weitere Informationen finden Sie unter Zulassen des Einfügens in die Konsole unter Ausführen von JavaScript in der Konsole.

Deaktivieren von Selbst-XSS-Warnungen durch Starten von Edge mit einem Befehlszeilenflag

Um die oben genannten Warnungen zu verhindern und sofort das Einfügen in das Konsolentool und den Codeausschnitt-Editor des Quellentools zuzulassen, z. B. für automatisierte Tests, starten Sie Microsoft Edge über die Befehlszeile, indem Sie das folgende Flag verwenden: --unsafely-disable-devtools-self-xss-warnings. Das Flag gilt für eine einzelne Microsoft Edge-Sitzung.

Unter Windows beispielsweise:

Edge Stable:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Beta:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Beta\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Dev:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge Dev\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Edge Canary:

"C:\Users\localAccount\AppData\Local\Microsoft\Edge SxS\Application\msedge.exe" --unsafely-disable-devtools-self-xss-warnings

Ausführen eines Ausschnitts

Ausführen eines Ausschnitts aus dem Quellentool

  1. Öffnen Sie die Registerkarte Codeausschnitte.

  2. Klicken Sie auf den Namen des Codeausschnitts, den Sie ausführen möchten. Der Codeausschnitt wird im Code-Editor geöffnet:

  3. Klicken Sie auf die Schaltfläche Codeausschnitt ausführen (Codeausschnitt ausführen), oder drücken Sie STRG+EINGABETASTE (Windows, Linux) oder BEFEHL+EINGABETASTE (macOS):

    Schaltfläche

Ausführen eines Ausschnitts über das Befehlsmenü

  1. Fokus des Cursors an einer beliebigen Stelle in DevTools.

  2. Drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS), um das Befehlsmenü zu öffnen.

  3. Löschen Sie das > Zeichen, und geben Sie das Zeichen ! gefolgt vom Namen des Codeausschnitts ein, den Sie ausführen möchten:

    Ausführen eines Ausschnitts über das Befehlsmenü

  4. Drücken Sie die EINGABETASTE , um den Codeausschnitt auszuführen.

Umbenennen eines Ausschnitts

  1. Öffnen Sie die Registerkarte Codeausschnitte.

  2. Klicken Sie mit der rechten Maustaste auf den Codeausschnittnamen, und wählen Sie dann Umbenennen aus.

Löschen eines Ausschnitts

  1. Öffnen Sie die Registerkarte Codeausschnitte.

  2. Klicken Sie mit der rechten Maustaste auf den Codeausschnittnamen, und wählen Sie dann Entfernen aus.

Speichern eines Ausschnitts auf einem Datenträger als Datei

Standardmäßig sind Codeausschnitte nur in DevTools verfügbar, Sie können aber auch Codeausschnitte auf einem Datenträger speichern.

  1. Öffnen Sie die Registerkarte Codeausschnitte.

  2. Klicken Sie mit der rechten Maustaste auf den Codeausschnittnamen, und wählen Sie dann Speichern unter aus.

    Das Dialogfeld Speichern unter wird geöffnet.

  3. Wählen Sie einen Ordner aus, geben Sie einen Dateinamen ein (z Script snippet #1.js. B. ), und klicken Sie dann auf die Schaltfläche Speichern .

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Kayce Basques geschrieben.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.