Informationen zur Liste der Tools
DevTools bietet mehr als 30 Tools:
- Zwei Symbole auf der Aktivitätsleiste für das Untersuchungstool (
) und Geräteemulation (
). - Drei permanente Toolregisterkarten auf der Aktivitätsleiste für die Tools Elemente, Konsole und Quellen .
- Optionale Registerkarten für optionale Tools wie die Willkommens- und Netzwerktools .
- Weitere optionale Tools im Menü Weitere Tools (
), z. B. die Tools 3D-Ansicht und Getrennte Elemente .
Die folgenden Features sind zusätzliche Möglichkeiten, auf die Tools zuzugreifen:
- Der Bereich "Schnellansicht " ist eine zusätzliche Symbolleiste und ein zusätzlicher Bereich zum Speichern von Tools unterhalb oder rechts neben dem Aktivitätsleistenbereich .
- Das Befehlsmenü ist eine Möglichkeit, Funktionen von Tools direkt zu verwenden.
- Auf den Einstellungsseiten können zusätzliche Features von Tools aktiviert werden.
Übersicht über alle Tools
Microsoft Edge DevTools enthält die folgenden Tools.
| Tool | Zweck | Artikel |
|---|---|---|
| Tool für die 3D-Ansicht | Erkunden Sie die Webseite, die in eine 3D-Perspektive übersetzt wurde. Debuggen Sie Ihre Webseite, indem Sie durch den DOM- oder Z-Index-Stapelkontext navigieren. | Navigieren in Webseitenebenen, Z-Index und DOM mithilfe des 3D-Ansichtstools |
| Animationstool | Untersuchen und ändern Sie CSS-Animationseffekte mithilfe des Animationsinspektors im Animationstool . | Untersuchen und Ändern von CSS-Animationseffekten |
| Anwendungstool | Verwenden Sie das Anwendungstool , um den Speicher für Web-App-Seiten zu verwalten, einschließlich Manifest, Service Worker, lokaler Speicher, Cookies, Cachespeicher und Hintergrunddienste. | Das Anwendungstool zum Verwalten des Speichers |
| Änderungstool | Verfolgt alle Änderungen nach, die Sie an CSS oder JavaScript in DevTools vorgenommen haben. Zeigt Ihnen, welche Änderungen an Den tatsächlichen Quelldateien vorgenommen werden müssen, nachdem Sie DevTools zum Ändern der vom Server gesendeten Webseitendateien verwendet haben. | Nachverfolgen von Änderungen an Dateien mit dem Tool "Änderungen" |
| Konsolentool | Eine intelligente, umfangreiche Befehlszeile in DevTools. Ein großartiges Begleittool, das mit anderen Tools verwendet werden kann. Bietet eine leistungsstarke Möglichkeit, Skriptfunktionen zu erstellen, die aktuelle Webseite zu überprüfen und die aktuelle Webseite mithilfe von JavaScript zu bearbeiten. | Übersicht über die Konsole |
| Abdeckungstool | Helfen Sie Ihnen, ungenutzten JavaScript- und CSS-Code zu finden, um das Laden der Seite zu beschleunigen und die Mobilfunkdaten Ihrer mobilen Benutzer zu speichern. | Suchen von nicht verwendetem JavaScript- und CSS-Code mit dem Abdeckungstool |
| CSS-Übersichtstool | Helfen Sie Ihnen, das CSS Ihrer Seite besser zu verstehen und potenzielle Verbesserungen zu identifizieren. | CSS-Übersichtstool |
| Tool "Getrennte Elemente" | Um die Leistung Ihrer Seite zu erhöhen, sucht dieses Tool nach getrennten Elementen, die vom Browser nicht garbage-collect erfasst werden können, und identifiziert das JavaScript-Objekt, das immer noch auf das getrennte Element verweist. Indem Sie Ihr JavaScript so ändern, dass das Element freigegeben wird, verringern Sie die Anzahl der getrennten Elemente auf Ihrer Seite, wodurch die Seitenleistung und Reaktionsfähigkeit erhöht werden. | Debuggen von DOM-Speicherverlusten mit dem Tool "Getrennte Elemente" |
| Entwicklerressourcen | Zeigt Ressourcen-URLs für die Webseite an. | Tool für Entwicklerressourcen |
| Geräteemulation | Verwenden Sie das Tool Geräteemulation , das auch als Gerätesimulationsmodus oder Gerätemodus bezeichnet wird, um zu ermitteln, wie Ihre Seite auf einem mobilen Gerät aussieht und reagiert. | Emulieren mobiler Geräte (Geräteemulation) |
| Elementtool | Überprüfen, bearbeiten und debuggen Sie HTML und CSS. Sie können im Tool bearbeiten, während Sie die Änderungen live im Browser anzeigen. Debuggen Sie Ihren HTML-Code mithilfe der DOM-Struktur, und überprüfen Sie den CSS-Code für Ihre Webseite und arbeiten Sie daran. | Untersuchen, Bearbeiten und Debuggen von HTML und CSS mit dem Elementtool |
| Tool überprüfen | Verwenden Sie das Inspect-Tool , um Informationen zu einem Element auf einer gerenderten Webseite anzuzeigen. Wenn das Inspect-Tool aktiv ist, zeigen Sie mit dem Mauszeiger auf Elemente auf der Webseite, und DevTools fügt eine Informationsüberlagerung und eine Rastermarkierung auf der Webseite hinzu. | Analysieren von Seiten mit dem Inspect-Tool |
| Problemtool | Das Tool Probleme analysiert automatisch die aktuelle Webseite, meldet Probleme gruppiert nach Typ und stellt Dokumentation bereit, um die Probleme zu erklären und zu beheben. | Suchen und Beheben von Problemen mit dem Tool "Probleme" |
| JavaScript Profiler-Tool | Dieses Tool wurde durch das Leistungstool und das Speichertool ersetzt. | JavaScript Profiler-Tool |
| Lighthouse-Tool | Verwenden Sie das Lighthouse-Tool, um häufige Probleme zu identifizieren und zu beheben, die sich auf die Leistung, Barrierefreiheit und Benutzerfreundlichkeit Ihrer Website auswirken. | Lighthouse-Tool |
| Medientool | Verwenden Sie dieses Tool, um Informationen anzuzeigen und die Media Player pro Browserregisterkarte zu debuggen. | Anzeigen und Debuggen von Media Player-Informationen |
| Speichertool | Hier finden Sie Speicherprobleme, die sich auf die Seitenleistung auswirken, z. B. Speicherverluste, Arbeitsspeicherauslastung und häufige Garbage Collections. | Beheben von Speicherproblemen |
| Speicherprüfungstool | Untersuchen Sie JavaScript ArrayBuffer mit dem Memory Inspector. | Untersuchen eines JavaScript-Arraybuffers mit dem Speicherprüfungstool |
| Netzwerktool | Verwenden Sie das Netzwerktool , um sicherzustellen, dass Ressourcen wie erwartet heruntergeladen oder hochgeladen werden. Überprüfen Sie die Eigenschaften einer einzelnen Ressource, z. B. die HTTP-Header, den Inhalt oder die Größe. | Untersuchen der Netzwerkaktivität |
| Tool für Netzwerkbedingungen | Verwenden Sie das Tool Netzwerkbedingungen , um den Browsercache zu deaktivieren, die Netzwerkdrosselung festzulegen, die Benutzer-Agent-Zeichenfolge festzulegen und Content-Encodings wie deflate, gzip und br festzulegen. | Tool für Netzwerkbedingungen |
| Netzwerkkonsolentool | Verwenden Sie das Netzwerkkonsolentool , um Änderungen an Netzwerkanforderungen (Netzwerkaufrufen) vorzunehmen, um zu ermitteln, warum sie fehlschlagen. Ändern und wiedergeben Sie alle Netzwerkanforderungen, und führen Sie detaillierte Netzwerk-API-Aufrufe aus. | Netzwerkkonsolentool |
| Tool zum Blockieren von Netzwerkanforderungen | Verwenden Sie das Tool zum Blockieren von Netzwerkanforderungen , um blockierende Netzwerkanforderungen an ein angegebenes URL-Muster zu testen und zu sehen, wie sich eine Webseite verhält. | Tool zum Blockieren von Netzwerkanforderungen |
| Leistungstool | Analysieren Sie die Laufzeitleistung, d. h. die Leistung Ihrer Seite, wenn sie ausgeführt wird, im Gegensatz zum Laden. | Einführung in das Leistungstool |
| Leistungsüberwachungstool | Bietet eine Echtzeitansicht der Laufzeitleistung einer Webseite, um zu ermitteln, woher Leistungsprobleme kommen, wodurch eine Website langsam ausgeführt wird. Ermittelt, ob Probleme aufgrund einer hohen Arbeitsspeicher- oder CPU-Auslastung, zu häufigen Layout- und Stilberechnungen oder zu vielen DOM-Knoten und Ereignislistenern auftreten. | Messen der Laufzeitleistung einer Seite mit dem Leistungsmonitortool |
| Tool für schnelle Quellen | Verwenden Sie das Tool "Schnellquelle ", um Quelldateien anzuzeigen oder zu bearbeiten, wenn Sie ein anderes Tool als das Tool Quellen verwenden. | Anzeigen oder Bearbeiten von Quelldateien mit dem Tool "Schnellquelle" |
| Aufzeichnungstool | Verwenden Sie das Aufzeichnungstool , um Benutzerflows manuell aufzuzeichnen, und geben Sie sie dann automatisch wieder, um Tests und Leistungsuntersuchungen zu beschleunigen. | Aufzeichnen und Wiedergeben von Benutzerflows und Messen der Leistung |
| Renderingtool | Verwenden Sie das Renderingtool , um zu sehen, wie Ihre Webseite mit verschiedenen Anzeigeoptionen oder Sehfehlern aussieht. | Renderingtool, um zu sehen, wie eine Webseite mit verschiedenen Anzeigeoptionen oder Sehfehlern aussieht |
| Search Tool | Verwenden Sie das tool Search, um bestimmte Quelldateien für eine Webseite zu finden, einschließlich HTML-, CSS-, JavaScript- und Bilddateien. | Suchen nach Quelldateien für eine Seite mit dem Search-Tool |
| Sicherheitstool | Überprüft die Sicherheit einer Seite. | Grundlegendes zu Sicherheitsproblemen mithilfe des Sicherheitstools |
| Sensortool | Simuliert unterschiedliche Geräteausrichtungen. | Simulieren der Geräteausrichtung mit dem Sensortool |
| Monitortool für Quellzuordnungen | Verwenden Sie das Tool Source Maps Monitor , um Ihre Quellzuordnungen zu überwachen. | Monitortool für Quellzuordnungen |
| Quellentool | Verwenden Sie das Tool Quellen , um Front-End-JavaScript-Code anzuzeigen, zu ändern und zu debuggen sowie die HTML- und CSS-Dateien zu untersuchen und zu bearbeiten, aus denen die aktuelle Webseite besteht. | Übersicht über das Quellentool |
| WebAudio-Tool | Verwenden Sie das WebAudio-Tool , um den WebAudio-Datenverkehr zu überwachen. Das WebAudio-Tool verwendet die WebAudio-API. | WebAudio-Tool |
| WebAuthn-Tool | Verwenden Sie das WebAuthn-Tool , um softwarebasierte virtuelle Authentifikatoren zu erstellen und mit ihnen zu interagieren. | Emulieren von Authentifikatoren und Debuggen von WebAuthn |
| Willkommenstool | Das Willkommenstool wird geöffnet, wenn Sie DevTools zum ersten Mal öffnen. Es werden Links zu Entwicklerdokumenten, neuesten Features, Versionshinweisen und einer Option zum Kontaktieren des Microsoft Edge DevTools-Teams angezeigt. | Willkommenstool |
Experimentelle Tools
Microsoft Edge DevTools enthält möglicherweise zusätzliche Tools, wenn Sie das Kontrollkästchen des Experiments unter DevTools-Einstellungen > Experimente aktivieren. Zum Beispiel:
| Tool | Zweck | Artikel |
|---|---|---|
| Protokollüberwachungstool | Zeigt die DevTools-Protokollmeldungen an, die von DevTools gesendet und empfangen werden, um die überprüfte Seite zu debuggen. | Protokollmonitor in experimentellen Features. |
Menüs "Weitere Tools"
Das Menü Weitere Tools (+) in der Aktivitätsleiste und in der Symbolleiste "Schnellansicht " ist dynamisch: Es lässt alle Registerkartentools aus, die auf dieser Symbolleiste geöffnet sind.
Aktivitätsleistentools im Vergleich zu Schnellansichtstools
Aktivitätsleistentools sind Tools, die standardmäßig in der Aktivitätsleiste (im oberen Bereich) geöffnet werden. Schnellansichtstools sind Tools, die standardmäßig im Bereich Schnellansicht (im unteren Bereich) geöffnet werden. Um den Bereich Schnellansicht ein- oder auszublenden: Wenn sich der Fokus auf DevTools befindet, drücken Sie ESC.
Im Befehlsmenü werden zuerst die Aktivitätsleistentools (durch die Bezeichnung Panel ) und dann die Tools für die Schnellansicht aufgelistet:
Um ein Tool auf die andere Symbolleiste zu verschieben, klicken Sie mit der rechten Maustaste auf die Registerkarte des Tools, und wählen Sie dann In die untere Schnellansicht verschieben, Schnellansicht zur Seite verschieben, In die obere Aktivitätsleiste verschieben oder Aktivitätsleiste nach links verschieben aus:
Um das Befehlsmenü zu öffnen, drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS). Oder klicken Sie auf die Schaltfläche DevTools anpassen und steuern (
), und wählen Sie dann Befehl ausführen aus.
Schließende Toolregisterkarten
Um eine Toolregisterkarte auf einer Symbolleiste zu schließen, klicken Sie mit der rechten Maustaste auf die Registerkarte, und wählen Sie dann Aus Aktivitätsleiste entfernen oder Aus Schnellansicht entfernen aus:
Die Tools Elemente, Konsole und Quellen sind permanente Registerkarten und können nicht geschlossen oder von der Aktivitätsleiste in den Bereich Schnellansicht verschoben werden. Sie können ihre Registerkarten ziehen, um sie in der Aktivitätsleiste neu anzuordnen.
Das Konsolentool ist auch eine permanente Registerkarte auf der Symbolleiste "Schnellansicht" . Im Gegensatz dazu kann das Tool "Probleme" auf der Symbolleiste " Schnellansicht" entfernt werden.
Wiederherstellen der Standardtoolregisterkarten
So stellen Sie alle Standardtoolregisterkarten in der Aktivitätsleiste und schnellansicht wieder her:
Wählen Sie in DevTools die Option DevTools anpassen und steuern (
") >Einstellungen (
) >Einstellungen aus.Klicken Sie auf die Schaltfläche Standardwerte wiederherstellen und aktualisieren . DevTools wird neu gestartet, und die Standardregisterkarten werden in beiden Symbolleisten angezeigt.
Siehe auch
- Übersicht über DevTools : Ähnlich wie im vorliegenden Artikel, aber umfassender, mit einer einführung auf oberster Ebene in DevTools.