Freigeben über

Erstellen einer DevTools-Erweiterung, Hinzufügen einer benutzerdefinierten Toolregisterkarte und eines Bereichs

  • Artikel

Dieser Artikel enthält ein Beispiel und eine exemplarische Vorgehensweise für eine Microsoft Edge-Erweiterung, die eine Toolregisterkarte und einen Bereich in DevTools hinzufügt.

In diesem Artikel wird zunächst gezeigt, wie Sie das bereitgestellte DevTools-Erweiterungsbeispiel installieren und ausführen, das in DevTools in Microsoft Edge eine Toolregisterkarte des Beispielbereichs hinzufügt. Das Beispiel ist eine funktionierende DevTools-Erweiterung, die einen eigenen Bereich erstellt und mit den DevTools-APIs interagiert.

In diesem Artikel wird dann ein Tutorial vorgestellt, das zeigt, wie Sie dieses Beispiel optional von Grund auf neu erstellen können, und erläutert jeden Schritt der Entwicklung des Beispiels und die Funktionsweise des hinzugefügten Codes. Diese Tutorialschritte sind eine gute Möglichkeit, alles zu erfahren, was für die typische Entwicklung benötigt wird.

Siehe auch:

Herunterladen, Installieren und Ausführen des DevTools-Erweiterungsbeispiels

Zum Herunterladen, Installieren, Ausführen und Testen des bereitgestellten, abgeschlossenen DevTools-Erweiterungsbeispiels:

  1. Laden Sie den endgültigen Erweiterungscode herunter, indem Sie auf Demos-main.zip klicken und dann den Inhalt in einen Ordner auf Ihrem Computer extrahieren.

  2. Öffnen Sie Microsoft Edge, und wechseln Sie zu edge://extensions/.

  3. Aktivieren Sie die Umschaltfläche Entwicklermodus .

  4. Klicken Sie auf Entpackt laden , und navigieren Sie zu dem Ordner, in den Sie die ZIP-Datei extrahiert haben. Wählen Sie in diesem Ordner Demos-Standard>devtools-extension>sample 4 aus, und klicken Sie dann auf Ordner auswählen.

    Die seite edge://extensions in Microsoft Edge mit den Schaltflächen

    Die DevTools-Erweiterung wird geladen.

  5. Öffnen Sie in Microsoft Edge eine neue Registerkarte.

  6. Öffnen Sie DevTools (F12).

  7. Wählen Sie das Tool Beispielbereich (Registerkarte) aus.

    Das Tool Beispielbereich wird geöffnet:

    Microsoft Edge mit DevTools auf der Seite, wobei der Beispielbereich der Erweiterung ausgewählt ist

  8. Klicken Sie auf die Schaltfläche Say Hello zur überprüften Seite.

    Auf der überprüften Seite wird eine Warnung angezeigt:

    Microsoft Edge mit dem neuen Erweiterungsbereich in DevTools auf der Seite und einem Warnungsdialogfeld

  9. Klicken Sie auf die Schaltfläche OK , um die Warnung zu schließen.

  10. Klicken Sie auf eine beliebige Stelle auf der überprüften Seite.

    Im Erweiterungsbereich wird eine Meldung angezeigt: Sie haben auf der überprüften Seite auf die Position (199, 509) geklickt:

    Der Beispielbereich in DevTools mit der Meldung der angeklickten Position

  11. Wählen Sie das Konsolentool aus.

    Im Konsolentool wird eine Meldung angezeigt: Empfangene Antwort >{xPosition: 199, yPosition: 509}:

    Das DevTools-Konsolentool zeigt die Meldung der angeklickten Position an.

Sie haben das bereitgestellte, fertige Beispiel für die DevTools-Erweiterung heruntergeladen, installiert, ausgeführt und getestet. In den nächsten Schritten erstellen Sie dasselbe Beispiel, indem Sie aus einem leeren Verzeichnis beginnen. In den folgenden Abschnitten wird die Funktionsweise des Codes erläutert.

Schritt 1: Erstellen einer einfachen Microsoft Edge-Erweiterung mit einer DevTools-Webseite

Wenn Sie die Dateien für jeden wichtigen Schritt unten erstellen möchten, installieren Sie einen Code-Editor wie Visual Studio Code, um die folgenden Tutorialschritte auszuführen, um die obige DevTools-Beispielerweiterung manuell neu zu erstellen. Sie können die unten stehende exemplarische Vorgehensweise lesen, die als vier Hauptschritte oder Phasen dargestellt wird.

Eine grundlegende Erweiterung für Microsoft Edge besteht aus einer Manifestdatei (manifest.json). Da diese spezielle Erweiterung DevTools erweitert, enthält diese Erweiterung auch eine Webseitendatei, devtools.html. Die beiden Dateien werden im Microsoft Edge / Demos Verzeichnis /devtools-extension/sample 1/ des Repositorys > bereitgestellt. Das Verzeichnis enthält die Dateien:

  • devtools.html
  • manifest.json

manifest.json

manifest.json ist eine Manifestdatei, die Schlüssel-Wert-Paare enthält. Die Schlüssel der obersten Ebene werden als Member bezeichnet:

{
    "name": "DevTools Sample Extension",
    "description": "A Basic DevTools Extension",
    "manifest_version": 3,
    "version": "1.0",
    "devtools_page": "devtools.html"
}
Member Beschreibung
name Der Name der Erweiterung, der unter edge://extensions/angezeigt wird.
description Die Beschreibung der Erweiterung, die unter dem Namen der Erweiterung angezeigt wird.
version Die Version der Erweiterung, die neben dem Namen der Erweiterung angezeigt wird.
manifest_version Bestimmt den Satz von Features, die die Erweiterung verwendet, z. B. Servicemitarbeiter oder Änderungen an Netzwerkanforderungen. Die aktuelle Version ist Version 3. Weitere Informationen zu dieser Version und den Unterschieden zur Version 2finden Sie unter Übersicht und Zeitpläne für die Migration zu Manifest V3.
devtools_page Der Pfad zu einer HTML-Datei, die jedes Mal ausgeführt wird, wenn DevTools geöffnet wird und die JavaScript-Dateien der Erweiterung lädt. Diese Seite wird in DevTools nicht gerendert.

devtools.html

devtools.html entspricht dem devtools_page Member in der Manifestdatei:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    A Basic DevTools Extension.
  </body>
</html>

In einem späteren Schritt fügen Sie in der obigen Datei ein <script> -Element hinzu, um eine JavaScript-Datei zu laden. Diese HTML-Datei wird in DevTools nicht angezeigt.

Installieren und Testen der grundlegenden Microsoft Edge-Erweiterung

Das lokale Laden und Testen einer Edge-Erweiterung wird manchmal als Querladen einer Erweiterung bezeichnet, anstatt eine Erweiterung an Benutzer zu verteilen.

So laden und testen Sie Ihre Basiserweiterung lokal in Microsoft Edge:

  1. Navigieren Sie in Microsoft Edge zu edge://extensions/.

  2. Aktivieren Sie die Umschaltfläche Entwicklermodus .

  3. Klicken Sie auf Entpackt laden, navigieren Sie zu dem Ordner, in dem Sie den Code für Ihre Erweiterung geschrieben haben, und klicken Sie dann auf die Schaltfläche Ordner auswählen .

    Ihre DevTools-Erweiterung wird geladen.

  4. Öffnen Sie eine neue Registerkarte.

  5. Öffnen Sie DevTools (F12).

Ihre Erweiterung ist geladen, wird aber noch nicht in DevTools angezeigt, da Sie kein Panel für die Erweiterung erstellt haben.

Siehe auch:

Schritt 2: Hinzufügen eines benutzerdefinierten Tools in DevTools

In diesem Schritt erstellen Sie ein neues Panel (Toolregisterkarte) in DevTools. Sie können eine der folgenden Aktionen ausführen:

  • Kopieren Sie den Code aus dem Microsoft Edge / DemosRepositoryverzeichnis /devtools-extension/sample 2/, und fügen Sie ihn > ein. Dieses Verzeichnis enthält die folgenden Dateien:

    • devtools.html
    • devtools.js – In Schritt 2 hinzugefügt.
    • manifest.json
    • panel.html – In Schritt 2 hinzugefügt.

  • Kopieren Sie den Code aus den folgenden Codeauflistungen, und fügen Sie ihn ein.

Ein Bereich ist eine Toolregisterkarte in der Standard Symbolleiste in DevTools, ähnlich wie die unten gezeigten Tools Elemente, Konsole und Quellen:

DevTools-Bereiche und -Randleisten

So erstellen Sie eine grundlegende DevTools-Erweiterung mit einem Beispielbereich:

  1. Erstellen Sie eine Datei mit dem Namen devtools.js.

  2. Kopieren Sie den folgenden Code, und fügen Sie ihn in devtools.jsein:

    chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
});

    Die create -Methode weist die folgende Signatur auf:

    chrome.devtools.panels.create(
    title: string, // Tool tab's label in Activity bar.
    iconPath: string, // Icon to display in tool's tab.
    pagePath: string, // Webpage to display in tool's panel.
    callback: function // Code to run when tool is opened.
)

    Referenz:

    devtools.html:

  3. Erstellen Sie eine Datei mit dem Namen devtools.html.

  4. Kopieren Sie den folgenden Code, und fügen Sie ihn in devtools.htmlein:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script src="devtools.js"></script>
  </body>
</html>

    In der Manifestdatei (manifest.json) gibt das devtools_page Feld die obige Datei an (devtools.html). devtools.htmlenthält ein <script> -Element, das lädt devtools.js.

    panel.html:

  5. Erstellen Sie die panel.html Datei, auf die Sie im vorherigen chrome.devtools.panels.create Methodenaufruf verwiesen haben. Diese Webseite enthält die Benutzeroberfläche des Bereichs, den Ihre Erweiterung zu DevTools hinzufügt.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>A Basic DevTools Extension with Panel</h1>
  </body>
</html>

Erneutes Laden und Testen der DevTools-Erweiterung

Laden Sie Ihre Erweiterung von der edge://extensions/ Seite neu, um Ihre Änderungen in Microsoft Edge zu testen:

  1. Gehen Sie zu edge://extensions/.

  2. Klicken Sie neben dem DevTools-Erweiterungsbeispiel, das Sie vor dem Schreiben Ihres eigenen Codes installiert haben, auf Neu laden:

    Die Microsoft Edge-Erweiterungsseite, auf der angezeigt wird, wo sich die Schaltfläche

    Die DevTools-Erweiterung wird neu geladen und verwendet jetzt die Dateien, die Sie oben erstellt haben, anstelle des bereitgestellten Beispiels, das Sie heruntergeladen haben.

  3. Öffnen Sie eine neue Registerkarte in Microsoft Edge.

  4. Öffnen Sie DevTools (F12).

  5. Wählen Sie in der Aktivitätsleiste das Tool Beispielbereich (Registerkarte) aus:

    Die neue Toolregisterkarte und der Bereich in DevTools

Schritt 3: Anzeigen von Speicherinformationen durch Aufrufen von Erweiterungs-APIs

In diesem Schritt verwenden Sie Erweiterungs-APIs, um Speicherinformationen im DevTools-Bereich anzuzeigen. Dazu müssen wir die in der permissions Manifestdatei, der Panelschnittstelle und dem DevTools-Skript aktualisieren. Sie können die Quellcodedateien für diesen Schritt aus dem Microsoft Edge / Demos Verzeichnis >/devtools-extension/sample 3/ kopieren oder die Dateien selbst erstellen, indem Sie die folgenden Anweisungen befolgen. Das Verzeichnis enthält die Dateien:

  • devtools.html
  • devtools.js – Aktualisiert in Schritt 3.
  • manifest.json – Aktualisiert in Schritt 3.
  • panel.html – Aktualisiert in Schritt 3.

  1. Verwenden Sie das permissions Manifestelement in Ihrer manifest.json Datei. Dieses Mitglied definiert, welche Berechtigungen Ihre Erweiterung vom Benutzer benötigt. Für die Verwendung bestimmter Erweiterungs-APIs sind einige Berechtigungen erforderlich.

    "permissions": [
  "system.memory",
]

    Die system-memory Berechtigung ist erforderlich, um die Erweiterungs-APIs verwenden zu können, die Sie später in diesem Tutorial verwenden werden. Weitere Informationen zu den verfügbaren APIs und den zugehörigen Berechtigungen finden Sie in der API-Referenz für Erweiterungs-APIs.

    panel.html:

  2. Fügen Sie dem Textkörper in der panel.html Datei Folgendes hinzu, um die Daten im Bereich anzuzeigen.

    <div>
  Available Memory Capacity: <span id="availableMemoryCapacity"></span>
</div>
<div>
  Total Memory Capacity: <span id="totalMemoryCapacity"></span>
</div>

    devtools.js:

  3. Aktualisieren Sie die devtools.js Datei mit dem folgenden Code.

    let availableMemoryCapacity;
let totalMemoryCapacity;

chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
    panel.onShown.addListener((extPanelWindow) => {
        availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
        totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
    });
});

setInterval(() => {
    chrome.system.memory.getInfo((data) => {
        if (availableMemoryCapacity) {
            availableMemoryCapacity.innerHTML = data.availableCapacity;
        }
        if (totalMemoryCapacity) {
            totalMemoryCapacity.innerHTML = data.capacity;
        }
    });
}, 1000);

Der obige Codeausschnitt führt Folgendes aus:

  1. Erstellt ein neues Panel Sample Panel in DevTools.

  2. Wenn das Panel (Listener) angezeigtpanel.onShown wird, werden die availableMemoryCapacity Elemente und totalMemoryCapacity aus dem DOM abgerufen.

  3. Legt einen Timer fest, um Code jede Sekunde auszuführen, nachdem das Panel angezeigt wird.

  4. Wenn der Timer ausgelöst wird, wird die chrome.system.memory.getInfo -Methode verwendet, um die verfügbare und gesamte Speicherkapazität des Geräts abzurufen, und diese Werte werden in den entsprechenden DOM-Elementen angezeigt.

Erneutes Laden und Testen der DevTools-Erweiterung

Laden Sie Ihre Erweiterung von der edge://extensions/ Seite neu, um Ihre Änderungen in Microsoft Edge zu testen:

  1. Gehen Sie zu edge://extensions/.

  2. Klicken Sie neben ihrer DevTools-Erweiterung auf Neu laden.

    Ihre DevTools-Erweiterung wird neu geladen.

  3. Öffnen Sie eine neue Registerkarte.

  4. Öffnen Sie DevTools (F12).

  5. Wählen Sie das Tool Beispielbereich aus .

    Ihre DevTools-Erweiterung zeigt die verfügbaren und gesamt verfügbaren Arbeitsspeicherkapazitäten an:

    Der neue Erweiterungsbereich in DevTools mit Speicherinformationen

Siehe auch:

Schritt 4: Interagieren zwischen der Webseite und DevTools

In diesem Schritt des Tutorials fügen Sie Code hinzu, der mit der überprüften Webseite interagiert. Dieser Code führt Folgendes aus:

  1. Lauschen Sie auf Klickereignisse, die auf der Webseite auftreten, und melden Sie sie beim DevTools-Konsolentool an.
  2. Zeigen Sie die Position des Mausklicks im Bereich der DevTools-Erweiterung an.
  3. Wenn der Benutzer im Bereich der DevTools-Erweiterung auf eine Schaltfläche klickt, wird auf der überprüften Webseite eine Begrüßungswarnung angezeigt.

Sie können die Dateien, die das Endergebnis dieses Schritts sind, aus dem Microsoft Edge / DemosRepositoryverzeichnis /devtools-extension/sample 4/ kopieren oder die Dateien selbst erstellen, indem Sie die folgenden Anweisungen > befolgen. Das Verzeichnis enthält die Dateien:

  • background.js – in Schritt 4 hinzugefügt.
  • content_script.js – in Schritt 4 hinzugefügt.
  • devtools.html
  • devtools.js – aktualisiert in Schritt 4.
  • manifest.json – aktualisiert in Schritt 4.
  • panel.html – aktualisiert in Schritt 4.

Das DevTools-Tool (Panel), das Sie bisher erstellt haben, hat keinen direkten Zugriff auf die überprüfte Webseite und wird erst ausgeführt, wenn DevTools geöffnet ist. Dazu verwenden Sie ein Inhaltsskript und einen Hintergrunddienst-Worker.

  • Ein Inhaltsskript wird im Kontext der überprüften Webseite ausgeführt. Auf die gleiche Weise wie andere Skripts von der Webseite geladen werden, hat ein Inhaltsskript Zugriff auf das DOM und kann es ändern.
  • Ein Hintergrunddienst-Worker ist ein Skript, das der Browser in einem separaten Thread ausführt. Dieses Skript hat Zugriff auf die Microsoft Edge-Erweiterungs-APIs.

Die DevTools-Seite, die überprüfte Seite, das Inhaltsskript und der Hintergrunddienstmitarbeiter passen in eine Erweiterung zusammen:

Diagramm, das die Anatomie einer DevTools-Erweiterung zeigt

In diesem Teil des Tutorials erkennen Sie mithilfe eines Inhaltsskripts, dass der Benutzer auf eine Webseite klickt. Das Inhaltsskript leitet diese Informationen an die devtools.js Datei weiter, wo die Daten sowohl in der Konsole als auch im DevTools-Erweiterungsbereich angezeigt werden.

  1. Fügen Sie den folgenden Code in die manifest.json Datei ein:

    "content_scripts": [{
  "matches": [
    "http://*/*",
    "https://*/*"
  ],
  "run_at": "document_idle",
  "js": [
    "content_script.js"
  ]
}],
"background": {
    "service_worker": "background.js"
}
    Schlüssel Wert
    matches Gibt an, in welche Seiten dieses Inhaltsskript eingefügt wird.
    run_at Gibt an, wann der Browser das Skript auf die Seite einschleust.
    js Die javascript-Dateien, die eingefügt werden sollen.

    content_script.js:

  2. Erstellen Sie eine Datei mit dem Namen content_script.js.

  3. Kopieren Sie den folgenden Code, und fügen Sie ihn in content_script.jsein:

    document.addEventListener("click", (event) => {
  chrome.runtime.sendMessage({
      click: true,
      xPosition: event.clientX + document.body.scrollLeft,
      yPosition: event.clientY + document.body.scrollTop
    },
    response => {
      console.log("Received response", response);
    }
  );
});

    Der obige Codeausschnitt gibt eine Nachricht an die Konsole aus, wenn das Skript auf der Seite eingefügt wird. Außerdem wird der Seite ein Klickereignislistener hinzugefügt, der mithilfe chrome.runtime.sendMessage der API eine Nachricht mit Mausklickposition auf der überprüften Seite sendet.

    panel.html:

  4. Fügen Sie in der panel.html Datei wie folgt eine sayHello Schaltfläche und eine Bezeichnung hinzu youClickedOn :

    <button id="sayHello">Say Hello to the inspected page!</button>
<h2><span id="youClickedOn"></span></h2>

    Die beiden oben genannten Elemente werden verwendet, um die Interaktion zwischen der überprüften Seite, dem DevTools-Panel und dem Hintergrunddienstmitarbeiter zu demonstrieren. Wenn der Benutzer in der DevTools-Erweiterung auf die sayHello Schaltfläche klickt, wird eine Begrüßungsnachricht im überprüften Fenster angezeigt. Wenn der Benutzer auf eine beliebige Stelle auf der überprüften Seite klickt, wird eine Meldung angezeigt, in der die Position des Mausklicks im DevTools-Erweiterungsbereich angezeigt wird.

    devtools.js:

  5. Verwenden Sie in der devtools.js Datei (wie unten dargestellt) die chrome.runtime.connect -Methode, um eine Verbindung mit dem Hintergrunddienst-Worker herzustellen, und senden Sie dann das überprüfte Fenster tabId mithilfe der -Methode an den backgroundPageConnection.postMessage Service Worker. Fügen Sie schließlich ereignislistener zur sayHello Schaltfläche und youClickedOn Bezeichnung hinzu, die in der panel.html Datei definiert sind, wie unten gezeigt:

    let youClickedOn; 
chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
    panel.onShown.addListener( (extPanelWindow) => {
        let sayHello = extPanelWindow.document.querySelector('#sayHello');
        youClickedOn = extPanelWindow.document.querySelector('#youClickedOn');
        sayHello.addEventListener("click", () => {
            // show a greeting alert in the inspected page
            chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools extension");');
        });             
    });
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    // Messages from content scripts should have sender.tab set
    if (sender.tab && request.click == true) {
        console.log('I am here!');
        if (youClickedOn) {
            youClickedOn.innerHTML = `You clicked on position (${request.xPosition}, ${request.yPosition}) in the inspected page.`;
        }
        sendResponse({
            xPosition: request.xPosition,
            yPosition: request.yPosition
        });
    }
});

// Create a connection to the background service worker
const backgroundPageConnection = chrome.runtime.connect({
    name: "devtools-page"
});

// Relay the tab ID to the background service worker
backgroundPageConnection.postMessage({
    name: 'init',
    tabId: chrome.devtools.inspectedWindow.tabId
});

    Wenn der Benutzer auf die sayHello Schaltfläche klickt, führt die DevTools-Erweiterung einen Codeausschnitt von alert("Hello from the DevTools Extension"); im überprüften Fenster aus, indem die eval() -Methode des überprüften Fensters chrome.devtools.inspectedWindowaufgerufen wird.

    Wenn der Benutzer im überprüften Fenster auf eine beliebige Stelle klickt, erhält die DevTools-Erweiterung eine Nachricht vom Hintergrunddienstmitarbeiter mit request.click == true und den Mauspositionsinformationen.

    background.js:

  6. Erstellen Sie eine Datei mit dem Namen background.js.

  7. Kopieren Sie den folgenden Code, und fügen Sie ihn in background.jsein:

    let id = null;
const connections = {};

chrome.runtime.onConnect.addListener(devToolsConnection => {
    // Assign the listener function to a variable so we can remove it later
    let devToolsListener = (message, sender, sendResponse) => {
        if (message.name == "init") {
            id = message.tabId;
            connections[id] = devToolsConnection;
            // Send a message back to DevTools
            connections[id].postMessage("Connected!");
        }
    };

    // Listen to messages sent from the DevTools page
    devToolsConnection.onMessage.addListener(devToolsListener);

    devToolsConnection.onDisconnect.addListener(() => {
        devToolsConnection.onMessage.removeListener(devToolsListener);
    });
});

    Der obige Code verbindet den Hintergrunddienst-Worker mit der DevTools-Seite. Es lauscht, wenn die DevTools-Seite eine Verbindung herstellt, speichert die Verbindung und sendet eine Antwort zurück an die DevTools-Seite.

    Dies ist nützlich, wenn Ihr Hintergrunddienstmitarbeiter Daten sammelt oder Aufgaben im Hintergrund ausführt, die in Ihrer DevTools-Erweiterung verfügbar sein sollen.

Erneutes Laden und Testen der DevTools-Erweiterung

So testen Sie die neue sayHello Schaltfläche:

  1. Gehen Sie zu edge://extensions/.

  2. Suchen Sie den eintrag für die entpackte Erweiterung, den Sie in Schritt 1 geladen haben.

  3. Klicken Sie auf die Schaltfläche Neu laden .

  4. Öffnen Sie eine neue Browserregisterkarte, öffnen Sie DevTools (F12), und klicken Sie dann auf das Tool Beispielbereich (Registerkarte).

  5. Klicken Sie auf die Schaltfläche Say Hello to The Inspected Page!.

    Auf der überprüften Seite wird eine Warnung angezeigt:

    Microsoft Edge mit dem neuen Erweiterungsbereich in DevTools auf der Seite und einem Warnungsdialogfeld

  6. Klicken Sie auf die Schaltfläche OK , um die Warnung zu schließen.

  7. Klicken Sie auf eine beliebige Stelle auf der überprüften Seite.

    Im Erweiterungsbereich wird eine Meldung angezeigt: Sie haben auf der überprüften Seite auf die Position (199, 509) geklickt:

    Der Beispielbereich in DevTools mit der Meldung der angeklickten Position

  8. Wählen Sie das Konsolentool aus.

    Im Konsolentool wird eine Meldung angezeigt: Empfangene Antwort >{xPosition: 199, yPosition: 509}:

    Das DevTools-Konsolentool zeigt die Meldung der angeklickten Position an.

Dadurch wird das Tutorial und die exemplarische Vorgehensweise zum Erstellen einer DevTools-Erweiterung abgeschlossen, die eine Toolregisterkarte und einen Bereich in DevTools in Microsoft Edge hinzufügt.

Siehe auch:

Siehe auch