Informationen zur Liste der Tools

DevTools bietet mehr als 30 Tools, bestehend aus Standardtools und weiteren Tools.

Standardtools

Standardmäßig sind die folgenden Tools in der Aktivitätsleiste oben in DevTools aufgeführt:

• Inspect-Tool
• " Geräteemulation
• Willkommen
• Elemente
• Konsole
• Quellen
• Netzwerk
• 
• Arbeitsspeicher
• Anwendung

Übersicht über die Standardtools

Tool	Zweck	Artikel
" Untersuchen	Verwenden Sie das Untersuchungstool, um Informationen zu einem Element auf einer gerenderten Webseite anzuzeigen. Wenn das Untersuchungstool aktiv ist, zeigen Sie mit der Maus auf Elemente auf der Webseite, und DevTools fügt eine Informationsüberlagerung und eine Rasterhervorhebung auf der Webseite hinzu.	Analysieren von Seiten mit dem Tool "Überprüfen"
" Geräteemulation	Verwenden Sie das Geräteemulationstool , auch als Gerätesimulationsmodus oder Gerätemodus bezeichnet, um anzunähern, wie Ihre Seite auf einem mobilen Gerät aussieht und reagiert.	Emulieren mobiler Geräte (Geräteemulation)
Willkommen	Das Willkommenstool wird geöffnet, wenn Sie DevTools zum ersten Mal öffnen. Es werden Links zu Entwicklerdokumentationen, den neuesten Features, Versionshinweisen und eine Option zum Kontaktieren des Microsoft Edge DevTools-Teams angezeigt.	Willkommenstool
Elemente	Untersuchen, bearbeiten und debuggen Sie Ihren HTML- und CSS-Code. Sie können im Tool bearbeiten, während die Änderungen live im Browser angezeigt werden. Debuggen Sie Ihren HTML-Code mithilfe der DOM-Struktur, und untersuchen und bearbeiten Sie das CSS für Ihre Webseite.	Untersuchen, Bearbeiten und Debuggen von HTML und CSS mit dem Elemente-Tool
Konsole	Eine intelligente, umfangreiche Befehlszeile in DevTools. Ein großartiges Begleitwerkzeug für andere Tools. Bietet eine leistungsstarke Möglichkeit, Funktionen zu skripten, die aktuelle Webseite zu überprüfen und die aktuelle Webseite mit JavaScript zu bearbeiten.	Konsole – Übersicht
Quellen	Verwenden Sie das Quellentool , um JavaScript-Code am Front-End anzuzeigen, zu ändern und zu debuggen sowie die HTML- und CSS-Dateien zu überprüfen und zu bearbeiten, aus denen die aktuelle Webseite besteht.	Übersicht über das Tool "Quellen"
Netzwerk	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.	Überprüfen der Netzwerkaktivität
	Analysieren Sie die Laufzeitleistung, d. h. die Leistung Ihrer Seite bei der Ausführung im Gegensatz zum Laden.	Analysieren der Laufzeitleistung (Tutorial)
Arbeitsspeicher	Suchen Sie nach Speicherproblemen, die sich auf die Seitenleistung auswirken, einschließlich Speicherverlusten, Aufblähung des Arbeitsspeichers und häufigen Garbage Collections.	Beheben von Arbeitsspeicherproblemen
Anwendung	Verwenden Sie das Anwendungstool , um Speicher für Web-App-Seiten zu verwalten, einschließlich Manifest, Service Worker, lokaler Speicher, Cookies, Cachespeicher und Hintergrunddienste.	Das Anwendungstool, um Speicher zu verwalten

Die Tools (Registerkarten) " Elemente", "Konsole" und "Quellen " sind dauerhaft in der Aktivitätsleiste. Die anderen Toolregisterkarten können entfernt oder nach unten in die Symbolleiste "Schnellansicht" verschoben werden.

Weitere Tools

Die Schaltfläche Weitere Tools (") auf der Aktivitätsleiste listet zusätzliche, optionale Tools auf, die der Aktivitätsleiste hinzugefügt werden können.

Es gibt auch eine Schaltfläche Weitere Tools (") auf der Symbolleiste "Schnellansicht " am unteren Rand von DevTools. Um den Schnellansichtsbereich ein- oder auszublenden, drücken Sie ESC. oder klicken Sie oben rechts auf DevTools anpassen und steuern (...), und klicken Sie dann auf Schnellansichtsbereich umschalten.

Übersicht über die Tools im Menü "Weitere Tools"

Tool	Zweck	Artikel
3D-Ansicht	Erkunden Sie die Webseite, übersetzt in eine 3D-Perspektive. Debuggen Sie Ihre Webseite, indem Sie durch den DOM- oder Z-Index-Stapelkontext navigieren.	Navigieren Sie mit dem Tool 3D-Ansicht durch Webseiten-Layer, Z-Index und DOM
Animationen	Untersuchen und ändern Sie CSS-Animationseffekte mithilfe desAnimationsinspektors im Animationstool.	Untersuchen und Ändern von CSS-Animationseffekten
Änderungen	Verfolgt alle Änderungen nach, die Sie in DevTools an CSS oder JavaScript vorgenommen haben. Zeigt Ihnen, welche Änderungen an Ihren tatsächlichen Quelldateien vorgenommen werden müssen, nachdem Sie mithilfe von DevTools Ihre vom Server gesendeten Webseitendateien geändert haben.	Nachverfolgen von Änderungen an Dateien mithilfe des Änderungstools
Abdeckung	Ihnen helfen, nicht verwendeten JavaScript- und CSS-Code zu finden, um das Laden Ihrer Seite zu beschleunigen und Mobilfunkdaten für Ihre mobilen Benutzer zu sparen.	Nach nicht verwendetem JavaScript- und CSS-Code mit dem Abdeckungstool suchen
Absturzanalyse	Analysieren Sie Abstürze Ihrer Web-App. Sie können einen JavaScript-Produktions-Stack-Trace eingeben, z. B. für nicht schwerwiegende JavaScript-Ausnahmen, und dann Ihre Quellzuordnungen auf den Stack-Trace anwenden, damit Sie schneller debuggen können.	Tool zur Absturzanalyse
CSS-Übersicht	Ihnen helfen, das CSS Ihrer Seite besser zu verstehen und potenzielle Verbesserungen zu identifizieren.	CSS-Übersichtstool
Developer-Ressourcen	Zeigt Ressourcen-URLs für die Webseite an.	Ressourcentool für Entwickler
Issues	Das Problemtool analysiert automatisch die aktuelle Webseite, meldet nach Typ gruppierte Probleme und stellt Dokumentationen bereit, die bei der Erläuterung und Behebung der Probleme helfen.	Suchen und Beheben von Problemen mit dem Problemtool
Leuchtturm	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
Medien	Verwenden Sie dieses Tool, um Informationen anzuzeigen und die Media Player pro Browsertab zu debuggen.	Anzeigen und Debuggen von Media Player-Informationen (Medientool)
Speicherinspektor	Untersuchen Sie JavaScript ArrayBuffer mit dem Speicherinspektor.	Untersuchen eines JavaScript ArrayBuffer mit dem Speicherprüfungstool
Netzwerkbedingungen	Verwenden Sie das Tool "Netzwerkbedingungen ", um den Browsercache zu deaktivieren, die Netzwerkdrosselung festzulegen, die Zeichenfolge des Benutzeragenten festzulegen und Inhaltscodierungen wie deflate, gzip und br festzulegen.	Tool für Netzwerkbedingungen
Netzwerkkonsole	Nehmen Sie mit dem Netzwerkkonsolentool Änderungen an Netzwerkanforderungen (Netzwerkaufrufen) vor, um zu sehen, warum sie fehlschlagen. Ändern und wiedergeben Sie alle Netzwerkanforderungen wieder, und führen Sie detaillierte Netzwerk-API-Aufrufe durch.	Netzwerkkonsolentool
Blockieren von Netzwerkanforderungen	Verwenden Sie das Tool zum Blockieren von Netzwerkanforderungen , um das Blockieren von Netzwerkanforderungen für ein bestimmtes URL-Muster zu testen und das Verhalten einer Webseite zu beobachten.	Blockierungstool für Netzwerkanforderungen
Systemmonitor	Bietet eine Echtzeitansicht der Laufzeitleistung einer Webseite, um festzustellen, woher Leistungsprobleme stammen, die dazu führen, dass eine Website langsam läuft. Ermittelt, ob die Probleme auf eine hohe Arbeitsspeicher- oder CPU-Auslastung, zu häufige Layout- und Stilberechnungen oder zu viele DOM-Knoten und Ereignislistener zurückzuführen sind.	Messen der Laufzeitleistung einer Seite mithilfe des Leistungsüberwachungstool
Quick Source	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 Quick Source-Tool
Rekorder	Verwenden Sie das Recorder-Tool, um Benutzerabläufe manuell aufzuzeichnen und dann automatisch wiederzugeben, um Tests und Leistungsuntersuchungen zu beschleunigen.	Aufzeichnen und Wiedergeben von Benutzerabläufen und Messen der Leistung
Rendering	Verwenden Sie das Renderingtool , um zu sehen, wie Ihre Webseite mit verschiedenen Anzeigeoptionen oder für Personen mit Sehstörungen aussieht.	Renderingtool, um zu sehen, wie eine Webseite mit verschiedenen Anzeigeoptionen oder für Personen mit Sehstörungen aussieht
Search	Verwenden Sie das Suchtool , um bestimmte Quelldateien für eine Webseite zu finden, einschließlich HTML-, CSS-, JavaScript- und Bilddateien.	Suchen von Quelldateien für eine Seite mithilfe des Suchtools
Sicherheit	Überprüft die Sicherheit einer Seite.	Grundlegendes zu Sicherheitsproblemen mithilfe des Sicherheitstools
Sensoren	Außerkraftsetzen der Geolocation, Simulieren der Geräteausrichtung, Erzwingen von Touchereignissen beim Klicken und Emulieren des Leerlaufzustands des Geräts.	Gerätesensoren emulieren
Quellzuordnungen Monitor	Verwende das Werkzeug Source-Map-Monitor , um deine Source-Maps zu überwachen.	Monitortool für Quellzuordnungen
WebAudio	Verwenden Sie das WebAudio-Tool , um den WebAudio-Datenverkehr zu überwachen. Das WebAudio-Tool verwendet die WebAudio-API.	WebAudio-Tool
WebAuthn	Verwenden Sie das WebAuthn-Tool , um softwarebasierte virtuelle Authentifikatoren zu erstellen und mit ihnen zu interagieren.	Emulieren von Authentifikatoren und Debuggen von WebAuthn

Das Menü "Weitere Tools " (+) in der Aktivitätsleiste und auf der Symbolleiste "Schnellansicht" ist dynamisch: Es lässt alle Registerkartentools aus, die auf dieser Symbolleiste geöffnet sind.

Zusätzliche Möglichkeiten für den Zugriff auf die Tools

Die folgenden Features sind zusätzliche Möglichkeiten, auf die Tools zuzugreifen:

• Der Schnellansichtsbereich ist eine zusätzliche Symbolleiste und ein Bereich zum Halten von Werkzeugen, unterhalb oder rechts davon des Aktivitätsleistenbereichs.

• Das Befehlsmenü ist eine Möglichkeit, Features von Tools direkt zu verwenden.

• Auf den Einstellungsseiten können zusätzliche Tools aktiviert werden.

Experimentelle Tools

Microsoft Edge DevTools enthält möglicherweise zusätzliche Tools, wenn Sie das Kontrollkästchen des Experiments unter "Experimente" in den DevTools-Einstellungen >aktivieren. Beispiel:

Tool	Zweck	Artikel
Protokollmonitor	Zeigt die DevTools-Protokollnachrichten an, die von DevTools gesendet und empfangen werden, um die überprüfte Seite zu debuggen.	Protokollmonitor in experimentellen Funktionen.

Tools für die Aktivitätsleiste im Vergleich zu Tools für die Schnellansicht

Aktivitätsleistentools sind Tools, die standardmäßig in der Aktivitätsleiste (dem oberen Bereich) geöffnet werden. Tools für die Schnellansicht sind Tools, die standardmäßig im Bereich "Schnellansicht " (im unteren Bereich) geöffnet werden. So blenden Sie den Schnellansichtsbereich ein oder aus: Wenn sich der Fokus auf DevTools befindet, drücken Sie ESC.

Im Befehlsmenü werden zuerst die Tools für die Aktivitätsleiste (angezeigt durch die Beschriftung des Bereichs ) und dann die Tools für die Schnellansicht aufgeführt:

Um ein Tool in 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", "Zur seitlichen Schnellansicht" oder "Nach oben 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ßen von Toolregisterkarten

Um eine Toolregisterkarte zu schließen, die sich auf einer Symbolleiste befindet, klicken Sie mit der rechten Maustaste auf die Registerkarte, und wählen Sie dann Aus Aktivitätsleiste entfernen oder Aus Schnellansicht entfernen:

Die Tools "Elemente", "Konsole" und " Quellen " sind permanente Registerkarten und können nicht geschlossen oder aus der Aktivitätsleistein den Schnellansichtsbereich 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 für die Schnellansicht . Im Gegensatz dazu kann das Problem-Tool auf der Symbolleiste "Schnellansicht " entfernt werden.

Wiederherstellen der Standardtoolregisterkarten

So stellen Sie alle Standardtoolregisterkarten in der Aktivitätsleiste und in der Schnellansicht wieder her:

1. Wählen Sie in DevTools Anpassen und steuern von DevTools () Einstellungen (") >>Einstellungen aus.

2. Klicken Sie auf die Schaltfläche Standardeinstellungen wiederherstellen und aktualisieren . DevTools wird neu gestartet, und die Standardregisterkarten werden auf beiden Symbolleisten angezeigt.

Siehe auch

• Übersicht über DevTools – Ähnlich wie im vorliegenden Artikel, aber breiter angelegt, mit einer Einführung in DevTools auf oberster Ebene.