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:

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 (").

   

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 () 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:

   

Erstellen eines neuen Ausschnitts

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:

   

Erstellen eines neuen 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:

   

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:

   

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:

   

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 (), oder drücken Sie STRG+EINGABETASTE (Windows, Linux) oder BEFEHL+EINGABETASTE (macOS):

   

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:

   

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

Standardmäßig sind Codeausschnitte nur in DevTools verfügbar, aber Sie können sie auch 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.

3. Wenn Sie dazu aufgefordert werden, geben Sie einen Dateinamen und einen Speicherort ein.

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