Beispiel: Benutzerdefiniertes DevTools-Tool

Das Beispiel "Benutzerdefiniertes DevTools-Tool" ist eine Microsoft Edge-Erweiterung, die ein benutzerdefiniertes Tool in Microsoft Edge DevTools hinzufügt, das über eine eigene Registerkarte in der Aktivitätsleiste verfügt.

Einführung

Das Benutzerdefinierte DevTools-Tool fügt eine Registerkarte und einen Bereich für benutzerdefinierte Tools in DevTools in Microsoft Edge hinzu:

Das benutzerdefinierte Tool zeigt Speicherinformationen an und sendet Nachrichten zwischen der überprüften Webseite und dem Panel in DevTools.

Das Benutzerdefinierte DevTools-Tool ruft die DevTools-API auf, um Speicherinformationen anzuzeigen.

Die zu überprüfende Webseite und das Benutzerdefinierte DevTools-Tool senden nachrichten aneinander.

Verwenden Sie diesen Artikel, um das Beispiel herunterzuladen, zu installieren und auszuführen. Weitere Informationen zum Code in diesem Beispiel finden Sie unter Hinzufügen eines benutzerdefinierten Tools in Microsoft Edge DevTools.

Schritt 1: Herunterladen des Beispiels

Falls noch nicht geschehen, laden Sie den Mainbranch des Demos-Repositorys herunter, oder klonen (oder verzweigen und klonen) Sie das Repository. Das Herunterladen des Repositorys ist am einfachsten und wird unten beschrieben.

Laden Sie den Mainbranch des Demos-Repositorys wie folgt herunter:

1. Wechseln Sie in Microsoft Edge zum Repository MicrosoftEdge/Demos .

2. Klicken Sie auf den Pfeil nach unten in der Schaltfläche Code , und wählen Sie dann ZIP herunterladen aus.

3. In Microsoft Edge zeigt das Dialogfeld Downloads an Demos-main.zip. "-main" wird hinzugefügt, d. h. ein statischer Momentaufnahme des "main"-Branchs des Repositorys.

4. Zeigen Sie rechts neben Demos-main.zip, und klicken Sie dann auf die Schaltfläche Im Ordner anzeigen ".

   Explorer wird geöffnet und zeigt den Ordner Downloads an.

5. Klicken Sie mit der rechten Maustaste auf Demos-main.zip, und wählen Sie dann Alle extrahieren aus.

   Das Dialogfeld Komprimierte (gezippt) Ordner extrahieren wird geöffnet.

6. Klicken Sie auf die Schaltfläche Extrahieren .

   Das Dialogfeld % abgeschlossen wird geöffnet und wird dann abgeschlossen.

7. Verschieben Sie den Demos-main Ordner in einen GitHub-Repositoryspeicherort, z C:\Users\localAccount\GitHub. B. .

Schritt 2: Installieren der Erweiterung zum Hinzufügen des Tools in DevTools

1. Öffnen Sie in Microsoft Edge ein neues Fenster oder eine neue Registerkarte.

2. Wählen Sie Einstellungen und mehr (") aus, zeigen Sie auf Erweiterungen, und wählen Sie dann Erweiterungen verwalten aus.

   Die Registerkarte Erweiterungen und die Seite werden geöffnet (edge://extensions).

3. Aktivieren Sie die Umschaltfläche Entwicklermodus .

4. Klicken Sie auf .

   Das Dialogfeld Erweiterungsverzeichnis auswählen wird geöffnet.

5. Navigieren Sie zu dem /Demos-main/devtools-extension Ordner, z C:\Users\localAccount\GitHub\Demos-main\devtools-extension\. B. , und klicken Sie dann auf die Schaltfläche Ordner auswählen .

   Das benutzerdefinierte DevTools-Tool Karte wird angezeigt:

   

Schritt 3: Auswählen des benutzerdefinierten Tools in DevTools

1. Navigieren Sie in Microsoft Edge in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. der To-Do-App.

   Das Benutzerdefinierte DevTools-Tool erfordert eine Webseite und keine leere Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Klicken Sie in der Aktivitätsleiste von DevTools auf die Registerkarte Benutzerdefiniert ().

   Die Registerkarte " Benutzerdefiniertes Tool" und der Bereich werden angezeigt:

   

   Wenn die Registerkarte des Tools "Benutzerdefiniert " (") nicht angezeigt wird, führen Sie eine der folgenden Aktionen aus:

   • Klicken Sie auf die Schaltfläche Weitere Tools (), und wählen Sie dann aus.

   • Machen Sie DevTools breiter, und klicken Sie dann auf die Registerkarte des Tools Benutzerdefiniert (").

   Die benutzerdefinierte DevTools-Seite enthält mehrere Abschnitte:

   • Speicheranzeigeinformationen.

   • Eine Schaltfläche zum Senden einer Nachricht von DevTools an die überprüfte Webseite, damit die Seite ein JavaScript-Dialogfeld alert anzeigt.

   • Ein Anzeigebereich "Koordinaten ", um eine Nachricht von der überprüften Webseite an die DevTools-Konsole und die benutzerdefinierten Tools zu senden.

Schritt 4: Anzeigen von Speicherinformationen mithilfe eines Erweiterungs-API-Aufrufs

• Beobachten Sie im Benutzerdefinierten Tool neben Verfügbare Speicherkapazität die einmalige Aktualisierung des Werts pro Sekunde:

  

Schritt 5: Senden einer Nachricht von DevTools an die überprüfte Seite

1. Klicken Sie im Benutzerdefinierten Tool auf die Schaltfläche Say Hello (Hallo sagen ).

   Ein JavaScript-Dialogfeld alert wird geöffnet, in dem die Folgende Meldung angezeigt wird: "Hello from the DevTools extension!" (Hallo aus der DevTools-Erweiterung!

   

   DevTools sendet eine Nachricht an die überprüfte Webseite, wodurch JavaScript eine Warnung anzeigt.

2. Klicken Sie auf die Schaltfläche OK .

   Das Dialogfeld wird geschlossen.

Schritt 6: Senden einer Nachricht von der überprüften Seite an DevTools

1. Klicken Sie auf der überprüften Webseite auf verschiedene Stellen.

   Im Benutzerdefinierten Tool werden die Koordinaten neben Koordinaten angezeigt und aktualisiert, während Sie herumklicken:

   

2. Wählen Sie in DevTools in der Aktivitätsleiste das Tool Konsole () aus.

3. Klicken Sie auf der überprüften Webseite auf verschiedene Stellen.

   Die angeklickten Koordinaten werden in der Konsole angezeigt:

   

Schritt 7: Ändern des benutzerdefinierten Tools

1. Falls noch nicht geschehen, installieren Sie Visual Studio Code.

2. Öffnen Sie Visual Studio Code.

3. Klicken Sie auf das Menü Datei und dann auf Ordner öffnen.

   Das Dialogfeld Ordner öffnen wird geöffnet.

4. Navigieren Sie zu dem /Demos-main/devtools-extension/ Ordner, z C:\Users\localAccount\GitHub\Demos-main\devtools-extension\. B. , und klicken Sie dann auf die Schaltfläche Ordner auswählen .

   Im bereich Explorer wird der /devtools-extension/ Ordner angezeigt.

5. Klicken Sie auf panel.html.

   panel.html wird zur Bearbeitung geöffnet:

   

6. Fügen Sie "My" zur <h2> Überschrift hinzu. Ändern Sie von:

   <h2>Custom DevTools Tool</h2>
   

   bis:

   <h2>My Custom DevTools Tool</h2>
   

7. Speichern Sie panel.html.

8. Klicken Sie im bereich Explorer auf manifest.json.

   manifest.json wird zur Bearbeitung geöffnet.

9. Fügen Sie "My" zu hinzu name. Ändern Sie aus:

   "name": "Custom DevTools Tool",
   

   bis:

   "name": "My Custom DevTools Tool",
   

10. Speichern Sie manifest.json.

Schritt 8: Laden Sie das geänderte benutzerdefinierte Tool neu.

1. Wählen Sie in Microsoft Edge Einstellungen und mehr (, zeigen Sie auf Erweiterungen, und wählen Sie dann Erweiterungen verwalten aus.

   Die Registerkarte Erweiterungen und die Seite werden geöffnet (edge://extensions).

2. Klicken Sie im benutzerdefinierten DevTools-Karte auf den Link Neu laden.

   Die Karte zeigt jetzt My Custom DevTools Tool als Namen der Erweiterung an:

   

Schritt 9: Verwenden des geänderten benutzerdefinierten Tools

1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zu einer Webseite, z. B. der To-Do-App.

   Das Benutzerdefinierte DevTools-Tool erfordert eine Webseite und keine leere Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

   DevTools wird geöffnet.

3. Klicken Sie in der Aktivitätsleiste von DevTools auf die Registerkarte Benutzerdefiniert ().

   Das Benutzerdefinierte Tool wird angezeigt, wobei der Überschrift im Bereich das Wort My hinzugefügt wird:

   

   Wenn der Titel weiterhin Custom DevTools Tool anstelle von My Custom DevTools Tool lautet, schließen Sie DevTools, und öffnen Sie es erneut.

   Wenn die Registerkarte des Tools "Benutzerdefiniert " (") nicht angezeigt wird, führen Sie eine der folgenden Aktionen aus:

   • Klicken Sie auf die Schaltfläche Weitere Tools (), und wählen Sie dann aus.

   • Machen Sie DevTools breiter, und klicken Sie dann auf die Registerkarte des Tools Benutzerdefiniert (").

Dies ist das Ende der Schritte zum Verwenden und Ändern des DevTools-Erweiterungsbeispiels.

Problembehandlung

Wenn die Registerkarte Benutzerdefiniert in DevTools nicht sichtbar ist oder veraltet ist und ihre neuesten Codeänderungen nicht angezeigt werden:

• Machen Sie DevTools breit, um viele Tools in der Aktivitätsleiste anzuzeigen.

• Schließen Sie DevTools, und öffnen Sie sie erneut.

• Aktualisieren oder hart aktualisieren Sie die überprüfte Seite.

• Klicken Sie in Microsoft Edge auf der Seite Erweiterungen für die Erweiterung auf Neu laden .

• Wenn in einer solchen Erweiterung kein Symbol bereitgestellt wird, ist die Registerkarte, wenn sie nicht ausgewählt ist, schmal und grau auf der rechten Seite der Aktivitätsleiste. Klicken Sie auf die schmale graue Registerkarte.

• Wechseln Sie zu einer Webseite, nicht zu einer leeren Registerkarte. Der Code im Beispiel "Benutzerdefiniertes DevTools-Tool" erfordert eine Webseite.

Wenn die Aktivitätsleiste schmal ist, wird das Benutzerdefinierte Devtools-Tool dem Menü Weitere Tools auf der Aktivitätsleiste hinzugefügt.

Die Registerkarte Benutzerdefiniert verfügt nicht über den Befehl Aus Aktivitätsleiste entfernen im Kontextmenü.

Weitere Informationen: