Hinzufügen einer benutzerdefinierten Benutzeroberfläche zu DevTools mithilfe von Erweiterungen

Zusätzlich zu den in Microsoft Edge DevTools verfügbaren Tools können Sie neue Tools hinzufügen, indem Sie Microsoft Edge-Erweiterungen installieren oder eigene Erweiterungen für Ihre spezifischen Anwendungsfälle erstellen. Eine Microsoft Edge-Erweiterung erweitert häufig die Microsoft Edge-Benutzeroberfläche um neue Schaltflächen und Bereiche, kann aber auch DevTools in Microsoft Edge erweitern, indem sie in der Aktivitätsleiste eine neue Toolregisterkarte hinzufügen.

Suchen einer Erweiterung, die DevTools erweitert

Die Kategorie Entwicklungstools unter Microsoft Edge-Add-Ons enthält Erweiterungen, die devTools in der Regel erweitern.

Es gibt keine Möglichkeit zu wissen, ob eine Erweiterung die DevTools-Aktivitätsleiste erweitert, ohne sie auszuführen oder sich den Quellcode anzusehen, aber die Entwicklungstools Kategorie unter Microsoft Edge-Add-Ons ist ein guter Ort, um nachzusehen.

Installieren einer Erweiterung in DevTools

So installieren Sie eine Microsoft Edge-Erweiterung, die DevTools erweitert:

  1. Wechseln Sie zu Microsoft Edge-Add-Ons, z. B. der Kategorie Entwicklungstools, und wechseln Sie zu der Erweiterung, die Sie installieren möchten.

    Wechseln Sie z. B. zur Erweiterung React-Entwicklertools. Dies ist das Beispiel, das für die folgenden Schritte verwendet wird:

    Die Seite React-Entwicklertools unter Microsoft Edge-Add-Ons

  2. Klicken Sie auf die Schaltfläche Abrufen . Ein Installationsdialogfeld wird geöffnet, Erweiterungsname> zu Microsoft Edge hinzufügen<?

  3. Klicken Sie auf die Schaltfläche Erweiterung hinzufügen . Ein Dialogfeld gibt an, dass die Erweiterung installiert wurde, und die Schaltfläche Erweiterungen (Erweiterungssymbol) listet nun die Erweiterung auf.

  4. Öffnen Sie eine neue Registerkarte oder ein neues Fenster, und wechseln Sie dann zu einer Seite, die Inhalte enthält, die für die DevTools-Erweiterung relevant sind. Verwenden Sie z. B. die TodoMVC-React Beispielseite, oder wechseln Sie zu einer Liveseite des Microsoft Edge-Demos-Repositorys, z. B. demo-to-do.

  5. Öffnen Sie DevTools, z. B. durch Drücken von F12. Im Fall dieser React Erweiterung werden zwei neue Registerkarten in der Aktivitätsleiste geöffnet: Komponenten und Profiler:

    DevTools mit den beiden neuen Registerkarten für React-Erweiterungstools

  6. Wenn die neuen Registerkarten nicht auf der Aktivitätsleiste angezeigt werden, machen Sie DevTools breiter, oder klicken Sie auf die Schaltfläche Weitere Tools (Symbol weitere Tools), und wählen Sie dann das Tool aus:

    Schaltfläche

Erstellen einer DevTools-Erweiterung

Sie können Ihre eigene DevTools-Erweiterung erstellen, um neue Registerkarten in der DevTools-Aktivitätsleiste hinzuzufügen und mit der überprüften Seite zu interagieren.

Weitere Informationen finden Sie unter Erstellen einer DevTools-Erweiterung.