Freigeben über

Übersicht über DevTools

  • Artikel

Der Microsoft Edge-Browser enthält integrierte Webentwicklungstools namens Microsoft Edge DevTools. DevTools ist eine Gruppe von Webentwicklungstools, die neben einer gerenderten Webseite im Browser angezeigt werden. DevTools bietet eine leistungsstarke Möglichkeit zum Untersuchen und Debuggen von Webseiten und Web-Apps. Sie können sogar Quelldateien bearbeiten und Websiteprojekte erstellen, alles in der DevTools-Umgebung.

Mit DevTools haben Sie folgende Möglichkeiten:

  • Überprüfen, optimieren und ändern Sie die Stile von Elementen auf der Webseite mithilfe von Livetools mit einer visuellen Benutzeroberfläche. Überprüfen Sie, wo der Browser Inhalte gespeichert hat, um die Webseite zu erstellen, einschließlich .html, .css, .jsund .png Dateiformate.

  • Emulieren Sie, wie sich Ihre Website auf verschiedenen Geräten verhält, und simulieren Sie eine mobile Umgebung mit unterschiedlichen Netzwerkbedingungen. Überprüfen Sie den Netzwerkdatenverkehr, und sehen Sie sich den Speicherort der Probleme an.

  • Debuggen Sie JavaScript mithilfe des Breakpointdebuggens und mit der Livekonsole. Ermitteln von Speicher- und Renderingproblemen mit Ihren Web-Apps.

  • Ermitteln Sie Probleme mit Barrierefreiheit, Leistung, Kompatibilität und Sicherheit in Ihren Produkten, und verwenden Sie DevTools, um die gefundenen Barrierefreiheitsprobleme zu beheben.

  • Verwenden Sie eine Entwicklungsumgebung, um Änderungen in DevTools mit dem Dateisystem und aus dem Web zu synchronisieren.

Video: Grundlegendes zur DevTools-Benutzeroberfläche

Miniaturbild für das Video

Dieses etwas ältere Video vom September 2022 zeigt die Legacy-Benutzeroberfläche für DevTools:

  • Anstelle der Aktivitätsleiste zeigt das Video die Legacysymbolleiste Standard.
  • Anstelle des Bereichs Schnellansicht (unten in DevTools) zeigt das Video die Schublade.

DevTools öffnen

In Microsoft Edge können Sie DevTools mit der Maus oder Tastatur auf eine der folgenden Arten öffnen. Welches Tool geöffnet wird, hängt davon ab, wie Sie DevTools öffnen.

Hauptmethoden:

Aktion Resultierendes Tool
Klicken Sie mit der rechten Maustaste auf ein beliebiges Element auf einer Webseite, und wählen Sie dann Untersuchen aus. Das Tool Elemente mit erweiterter DOM-Struktur, um das mit der rechten Maustaste geklickte Seitenelement anzuzeigen.
Drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). Das zuvor verwendete Tool oder das Willkommenstool .
Drücken Sie F12. Das zuvor verwendete Tool oder das Willkommenstool .

Weitere Möglichkeiten:

Aktion Resultierendes Tool
Wählen Sie auf der Microsoft Edge-Symbolleiste Einstellungen und mehr (Symbol >Weitere Tools>Entwicklungstools aus. Das zuvor verwendete Tool oder das Willkommenstool .
Drücken Sie STRG+UMSCHALT+J (Windows, Linux) oder BEFEHL+WAHL+J (macOS). Das Konsolentool .
Drücken Sie STRG+UMSCHALT+C (Windows, Linux) oder BEFEHL+WAHL+C (macOS). Das Tool Elemente mit erweiterter DOM-Struktur, um das <body> Element anzuzeigen.
Drücken Sie UMSCHALT+F10 , um das Kontextmenü zu öffnen. Um den Befehl Untersuchen auszuwählen, drücken Sie die NACH-OBEN-TASTE und dann die EINGABETASTE. Das Tool Elemente mit erweiterter DOM-Struktur, um das <html> Element anzuzeigen.
Drücken Sie TAB oder UMSCHALT+TAB , um den Fokus auf ein Seitenelement zu setzen. Drücken Sie dann UMSCHALT+F10 , um das Kontextmenü zu öffnen. Um den Befehl Untersuchen auszuwählen, drücken Sie die NACH-OBEN-TASTE und dann die EINGABETASTE. Das Tool Elemente mit erweiterter DOM-Struktur, um das fokussierte Seitenelement anzuzeigen.

Öffnen Sie DevTools, indem Sie mit der rechten Maustaste auf ein Element auf einer Webseite klicken.

Eine gute Möglichkeit zum Öffnen von DevTools besteht darin, mit der rechten Maustaste auf ein Element auf einer Webseite zu klicken und dann Untersuchen auszuwählen:

Klicken Sie mit der rechten Maustaste auf einen Link über uns auf einer Demowebseite, und wählen Sie dann den Befehl Untersuchen aus.

DevTools wird geöffnet, wobei das Element, auf das mit der rechten Maustaste geklickt wird, in der DOM-Struktur im Tool Elemente hervorgehoben ist:

DevTools auf der rechten Seite von Microsoft Edge geöffnet, wobei ein DOM-Element in der DOM-Struktur im Tool Elemente ausgewählt ist

Öffnen Von DevTools mithilfe der Microsoft Edge-Symbolleiste

Wählen Sie auf der Microsoft Edge-Symbolleiste Einstellungen und mehr (...) >Weitere Tools>Entwicklungstools:

Das Menü

DevTools automatisch öffnen lassen, wenn Sie eine neue Registerkarte öffnen

So öffnen Sie DevTools automatisch, wenn Sie eine neue Registerkarte im Browser öffnen:

  1. Öffnen Sie in der Befehlszeile Microsoft Edge, und übergeben Sie dabei das --auto-open-devtools-for-tabs Flag wie folgt:

    Windows-Eingabeaufforderung:

    start msedge --auto-open-devtools-for-tabs

    Windows PowerShell:

    Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs"

    macOS-Terminal:

    /Applications/Microsoft\ Edge.app/Contents/MacOS/Microsoft\ Edge --auto-open-devtools-for-tabs

    Bash-Shell unter Linux:

    microsoft-edge --auto-open-devtools-for-tabs
Deaktivieren der Startverstärkung

Wichtig: Beim Starten über auto-open-devtools-for-tabsdürfen keine Microsoft Edge-Prozesse ausgeführt werden, daher müssen Sie möglicherweise die Startverstärkung in edge://settings/systemdeaktivieren.

Das Feature start boost hält einen minimalen Microsoft Edge-Prozess im Hintergrund. Dies beeinträchtigt das auto-open-devtools-for-tabs Feature und müsste deaktiviert werden, um es verwenden zu können. Weitere Informationen finden Sie unter Hilfe zur Startaufstockung.

Deaktivieren der F12-Tastenkombination

So verhindern Sie, dass durch Drücken von F12 DevTools geöffnet wird:

  1. Navigieren Sie in Microsoft Edge zu edge://settings/system.

  2. Scrollen Sie nach unten zum Abschnitt Entwicklertools, und deaktivieren Sie dann die Umschaltfläche F12 verwenden, um die Entwicklungstools zu öffnen.

    Seite

Tastaturunterstützung

Sie können mit DevTools mit der Maus oder Tastatur interagieren. Tastenkombinationen bieten einen schnellen Zugriff auf Funktionen und sind für die Barrierefreiheit erforderlich. Verschiedene Tools sind zunehmend über die Tastatur und Hilfstechnologien wie Sprachausgaben zugänglich.

Weitere Informationen finden Sie unter Tastenkombinationen und Navigieren in DevTools mit Hilfstechnologie.

Ändern, wo DevTools im Browser angedockt ist

Sie können DevTools rechts, links oder unten im Browser andocken oder in einem separaten Fenster ausdocken. Weitere Informationen finden Sie unter Ändern der DevTools-Platzierung (Ausdocken, Andocken nach unten, Andocken auf der linken Seite).

Vergrößern oder Verkleineren von DevTools

Die DevTools-Benutzeroberfläche wird mithilfe von HTML und CSS wie Webseiten implementiert, sodass Sie mithilfe der Standardtastenkombinationen vergrößern und verkleinern können. Die Zoomstufen für DevTools und die gerenderte Seite sind unabhängig.

So zoomen Sie den DevTools-Teil des Browsers:

  1. Wenn sich der Fokus noch nicht auf DevTools befindet, klicken Sie auf eine beliebige Stelle in DevTools.
  2. Drücken Sie STRG++ oder STRG+- (Windows oder Linux). Oder drücken Sie Befehl++ oder Befehl+- (macOS).

DevTools verkleinert

Um die gerenderte Seite zu vergrößern, klicken Sie auf die Seite, und verwenden Sie dann die gleichen Tastenkombinationen wie oben.

So stellen Sie den Zoom auf 100 % wieder her:

  1. Stellen Sie sicher, dass sich der Fokus auf dem gewünschten Teil des Browsers befindet, entweder Auf DevTools oder auf der gerenderten Seite.
  2. Drücken Sie STRG+0 oder STRG+NumPad0 (Windows oder Linux) oder BEFEHL+0 (macOS).

So zoomen Sie die DevTools-Einstellungen:

  1. Klicken Sie in den DevTools-Einstellungen oben rechts auf Schließen (x).
  2. Ändern Sie den Zoomfaktor von DevTools, wie oben beschrieben.
  3. Klicken Sie auf die Schaltfläche Einstellungen (Symbol Einstellungen).

So zoomen Sie DevTools mithilfe des Befehlsmenüs:

  1. Klicken Sie auf die Menüschaltfläche DevTools anpassen und steuern (Symbol anpassen), und wählen Sie dann Befehl ausführen aus.
  2. Beginnen Sie im Befehlsmenü mit der Eingabe von Zoom, und wählen Sie dann einen Zoombefehl aus:
    • Zoomfaktor zurücksetzen
    • Vergrößern
    • Verkleinern

Übersicht über die Benutzeroberfläche

Die DevTools-Benutzeroberfläche umfasst die folgenden Standard Bereiche:

  • Die Aktivitätsleiste oben oder links, die Symbole enthält, die für den Zugriff auf Tools, Einstellungen, Dokumentation und vieles mehr verwendet werden.

    • Der aktuelle Toolbereich, in dem das aktuell in der Aktivitätsleiste ausgewählte Tool angezeigt wird.

  • Die Symbolleiste "Schnellansicht" am unteren Rand, die Registerkarten enthält, die für den Zugriff auf Tools verwendet werden.

    • Der untere Toolbereich, in dem das Tool angezeigt wird, das derzeit in der Symbolleiste Schnellansicht ausgewählt ist.

Microsoft Edge mit geöffneten DevTools auf der Seite, wobei die 4 Standard UI-Bereiche hervorgehoben sind

Standardmäßig enthält die Aktivitätsleiste die folgenden Tools:

  • Umschalterschaltfläche "Tool überprüfen" (Symbol ")

  • Geräteemulationstool (Geräteemulationssymbol)-Schaltfläche.

  • Willkommenstool (Willkommenstoolsymbol).

  • Elementtool (Symbol ").

  • Konsolentool (Konsolentoolsymbol).

  • Quellentool (Symbol ").

  • Netzwerktool (Symbol ").

  • Leistungstool (Leistungstoolsymbol).

  • Speichertool (Speichertoolsymbol).

  • Anwendungstool (Anwendungstoolsymbol).

Standardmäßig enthält die Symbolleiste "Schnellansicht " die folgenden Tools:

  • Konsolentool (Konsolentoolsymbol).

  • Problemtool (Problemtoolsymbol).

In der Aktivitätsleiste enthalten Toolregisterkarten je nach Breite des DevTools-Fensters entweder den Toolnamen und das Symbol oder nur das Toolsymbol. Wenn das Fenster breit genug ist, werden der Toolname und das Symbol angezeigt. Wenn das Fenster zu schmal ist, wird nur das Toolsymbol und der Toolname angezeigt, wenn Sie auf das Toolsymbol zeigen.

Wenn sich die Aktivitätsleiste auf der linken Seite des DevTools-Fensters befindet, werden vertikal nur die Toolsymbole und die Toolnamen angezeigt, wenn Sie auf die Toolsymbole zeigen.

Ändern der Position der Aktivitätsleiste

Standardmäßig wird die Aktivitätsleiste horizontal am oberen Rand des DevTools-Fensters angezeigt. Um den nutzbaren Bildschirmbereich in einer Vielzahl von DevTools-Fenstergrößen und -Speicherorten zu maximieren, können Sie die Position der Aktivitätsleiste auf der linken Seite des DevTools-Fensters ändern oder je nach Andockposition des DevTools-Fensters automatisch festlegen.

Die Aktivitätsleiste kann sich an einem der folgenden Speicherorte befinden:

  • Oben (Standard): Die Aktivitätsleiste ist immer horizontal.

  • Linke Seite: Die Aktivitätsleiste ist immer vertikal.

  • An Dockposition anpassen: Die Aktivitätsleiste befindet sich in einer horizontalen oder vertikalen Ausrichtung, je nachdem, wo DevTools angedockt ist.

    • Wenn DevTools links oder rechts vom Browserfenster angedockt ist, ist die Aktivitätsleiste vertikal.

    • Wenn DevTools an der unteren Seite des Browserfensters angedockt oder in einem eigenen Fenster abgedockt wird, ist die Aktivitätsleiste horizontal.

Wenn die Aktivitätsleiste horizontal ist, werden Toolnamen neben Toolsymbolen angezeigt, wenn genügend Platz vorhanden ist, um sie anzuzeigen.

Wenn nicht genügend Platz zum Anzeigen aller Toolnamen vorhanden ist, werden auf der horizontalen Aktivitätsleiste einige Registerkarten mit Toolsymbolen und -namen sowie einige Registerkarten mit Symbolen angezeigt, die stattdessen eine QuickInfo enthalten:

Die horizontale Aktivitätsleiste mit begrenzter Breite, sodass einige Tools keine Beschriftung, sondern nur ein Symbol mit QuickInfo haben

Um die Position der Aktivitätsleiste zu ändern, führen Sie eine der folgenden Aktionen aus:

  • Klicken Sie auf die Schaltfläche DevTools anpassen und steuern (DevTools anpassen und steuern), und wählen Sie dann im Speicherort der Aktivitätsleiste einen Speicherort aus:

    Das Menü

  • Klicken Sie in der Aktivitätsleiste auf Aktivitätsleiste nach links verschieben (Symbol Aktivitätsleiste nach links verschieben) oder Aktivitätsleiste nach oben verschieben (Das Symbol Aktivitätsleiste nach oben verschieben).

  • Verwenden Sie das Befehlsmenü. Drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS), geben Sie die Wörter Aktivitätsleiste ein, und wählen Sie dann Aktivitätsleiste nach links verschieben oder Aktivitätsleiste nach oben verschieben aus. Weitere Informationen finden Sie unter Energietipp: Verwenden des Befehlsmenüs.

Ändern des Speicherorts der Schnellansicht

Standardmäßig befindet sich der Bereich Schnellansicht am unteren Rand von DevTools. Sie können den Bereich Schnellansicht auch auf der rechten Seite von DevTools platzieren.

Um den Bereich Schnellansicht anzuzeigen, drücken Sie ESC.

Um die Position des Bereichs Schnellansicht zu ändern, klicken Sie auf der Symbolleiste Schnellansicht auf der rechten Seite auf die Schaltfläche Dock-Schnellansicht (Symbol oder auf die Schaltfläche Dock-Schnellansicht auf der unteren Schaltfläche:

Das Symbol

Features der Aktivitätsleiste

DevTools bietet Ihnen eine erstaunliche Leistung, um die aktuell im Browser angezeigte Website zu überprüfen, zu debuggen und zu ändern. Die meisten Tools zeigen die Änderungen live an. Liveupdates machen die Tools nützlich, um die Darstellung und Navigation oder Funktionalität einer Webseite zu verfeinern, ohne sie aktualisieren oder erstellen zu müssen.

Toolpanels im Registerkartenformat mit Registerkarten und Seiten

Neben dem Inspect-Tool und der Geräteemulation ist DevTools in eine Reihe von Tools im Registerkartenformat unterteilt, z. B. das Tool Elemente , das Konsolentool und das Quellentool . Im Befehlsmenü werden Tools als Panels bezeichnet. Die Registerkarte eines Tools enthält einen Bereich, der die Benutzeroberfläche des Tools enthält.

Registerkarten auf höherer Ebene:

Tools sind in einer Reihe von Registerkarten auf der Aktivitätsleiste und auf der Symbolleiste " Schnellansicht" angeordnet. Die meisten Tools werden auch als Panels bezeichnet. Ein Panel ist die innere Benutzeroberfläche eines Tools. Ein Tool verfügt über eine Registerkarte, die auf der Aktivitätsleiste und der Symbolleiste "Schnellansicht" vorhanden sein kann.

Registerkarten auf niedrigerer Ebene:

Innerhalb des Bereichs einiger Tools gibt es mindestens einen Satz von Registerkarten (Registerkartenbereiche). Beispielsweise enthält das Elementtool eine Reihe von Registerkarten, die Formatvorlagen, Ereignislistener und Barrierefreiheitsregister enthalten. Bei anderen Tools enthält der Toolbereich Seiten auf der linken Seite.

Die Aktivitätsleiste und die Symbolleiste "Schnellansicht"

Es gibt zwei Symbolleisten: die Aktivitätsleiste am oberen Rand von DevTools und die Symbolleiste Schnellansicht am unteren Rand, wenn Sie ESC drücken.

Die Aktivitätsleiste enthält die folgenden Features:

  • Symboltools:
    • Umschalterschaltfläche "Tool überprüfen " (Symbol ")
    • Schaltfläche "Geräteemulation " (Symbol ").

  • Toolregisterkarten:

    • Willkommenstool .
    • Elemente-Tool . Permanent sind.
    • Konsolentool . Permanent sind.
    • Quellentool . Permanent sind.
    • Netzwerktool .
    • Leistungstool .
    • Speichertool .
    • Anwendungstool .

  • Ikonen:

    • Schaltfläche Aktivitätsleiste nach linksverschieben (Symbol ").
    • Schaltfläche "Weitere Tools " (Symbol ")
    • Anpassen und Steuern der DevTools-Menüschaltfläche (Symbol anpassen).
    • Hilfeschaltfläche (Hilfesymbol).
    • Schließen DevTools-Schaltfläche (DevTools-Symbol schließen).

Die Aktivitätsleiste mit Bezeichnungen, die ihre Features identifizieren

Die Funktionen der Aktivitätsleiste werden unten beschrieben.

Anheften und Neuordnen von Tools in der Aktivitätsleiste

Neben den permanenten Tools "Elemente", "Konsole" und " Quellen " können Sie steuern, welche Tools in der Aktivitätsleiste angezeigt werden, um DevTools so anzupassen, dass sie sich auf Ihre aktuellen Aktivitäten konzentrieren.

  1. Klicken Sie auf die Schaltfläche Weitere Tools (Symbol weitere Tools), um alle verfügbaren Tools aufzulisten:

    Das Menü Weitere Tools in der Aktivitätsleiste mit der erweiterten Liste aller Tools

  2. Wählen Sie ein Tool aus, um es an die Aktivitätsleiste anzuheften. Das Tool ist dann in der Aktivitätsleiste vorhanden, wenn DevTools geöffnet wird.

Wenn nicht genügend Platz in der Aktivitätsleiste vorhanden ist, um alle angehefteten Tools anzuzeigen, werden geöffnete, aber nicht angezeigte Tools in das Menü Weitere Tools verschoben:

Menü

Um ein Tool aus der Aktivitätsleiste zu lösen, klicken Sie mit der rechten Maustaste auf die Registerkarte des Tools, und wählen Sie dann Aus Aktivitätsleiste entfernen aus:

Klicken Sie mit der rechten Maustaste auf die Registerkarte des Leistungstools, um das Tool aus der Aktivitätsleiste zu entfernen.

Tool überprüfen

Wenn Sie auf die Schaltfläche Tool überprüfen (Toolsymbol überprüfen) klicken, können Sie ein Element auf der aktuellen Webseite auswählen. Während das Überprüfungstool aktiv ist, können Sie den Mauszeigen über verschiedene Teile der Webseite bewegen, um detaillierte Informationen zu Seitenelementen sowie eine mehrfarbige Überlagerung zu erhalten, die die Layoutdimensionen, den Abstand und den Rand des Seitenelements anzeigt.

Das Inspect-Tool, während der Mauszeiger auf die erste Überschrift dieses Artikels gezeigt wird

Geräteemulation

Klicken Sie auf die Schaltfläche Geräteemulation (Geräteemulationssymbol), um die aktuelle Website in einem emulierten Gerätemodus anzuzeigen. Mit dem Tool "Geräteemulation " können Sie ausführen und testen, wie Ihr Produkt reagiert, wenn Sie die Größe des Browsers ändern. Außerdem erhalten Sie eine Schätzung des Layouts und Verhaltens auf einem mobilen Gerät.

DevTools-Anzeige dieses Artikels auf einem emulierten Mobiltelefon

Weitere Informationen finden Sie unter Emulieren mobiler Geräte (Geräteemulation).

Willkommenstool

Enthält Informationen zu den neuen Features von DevTools, zur Kontaktaufnahme mit dem Team und informationen zu bestimmten Features.

Elementtool

Ermöglicht ihnen das Überprüfen, Bearbeiten und Debuggen von HTML und CSS. Sie können im Tool bearbeiten, während Sie die Änderungen live im Browser anzeigen.

Das Tool Elemente ist immer auf der Aktivitätsleiste vorhanden.

Konsolentool

Im Konsolentool haben Sie folgende Möglichkeiten:

  • Anzeigen und Filtern protokollierter Nachrichten aus Netzwerkanforderungen oder JavaScript-Protokollanweisungen.
  • Geben Sie JavaScript-Anweisungen ein, um sie in Echtzeit auszuwerten. Ausdrücke werden im aktuellen Kontext ausgewertet, z. B. wenn der JavaScript-Debugger im Quellentool an einem Haltepunkt angehalten wird.

Das Konsolentool ist immer auf der Aktivitätsleiste und auf der Symbolleiste "Schnellansicht" vorhanden.

Siehe Konsole.

Quellentool

Das Quellentool ist ein Code-Editor und JavaScript-Debugger. Sie können Projekte bearbeiten, Codeausschnitte verwalten und Ihr aktuelles Projekt debuggen.

Das Tool Quellen ist auf der Aktivitätsleiste immer vorhanden.

Netzwerktool

Mit dem Netzwerktool können Sie Anforderungen oder Antworten aus dem Netzwerk- und Browsercache überwachen und überprüfen. Sie können Anforderungen und Antworten nach Ihren Anforderungen filtern und verschiedene Netzwerkbedingungen simulieren.

Weitere Informationen finden Sie unter Untersuchen der Netzwerkaktivität.

Leistungstool

Weitere Informationen finden Sie unter Einführung in das Leistungstool.

Speichertool

Weitere Informationen finden Sie unter Beheben von Speicherproblemen.

Anwendungstool

Weitere Informationen finden Sie unter Anzeigen, Bearbeiten und Löschen von Cookies.

Schaltfläche "Weitere Tools"

Um der Aktivitätsleiste ein Tool hinzuzufügen, klicken Sie auf die Schaltfläche Weitere Tools (Symbol weitere Tools).

Anpassen und Steuern des DevTools-Menüs

Über die Schaltfläche DevTools anpassen und steuern (DevTools anpassen und steuern) wird ein Dropdownmenü für Folgendes geöffnet:

  • Dock DevTools an.
  • Docken Sie die Aktivitätsleiste an.
  • Wählen Sie ein Design aus.
  • Tastenkombinationen anzeigen.
  • DevTools-Einstellungen ändern.
  • Öffnen Sie die Geräteemulation.
  • Schalten Sie den Bereich Schnellansicht um.
  • Führen Sie einen Befehl aus.
  • Suchen Sie nach Code.
  • Öffnen Sie eine Datei.

Hilfe-Schaltfläche

Über die Schaltfläche Hilfe (Hilfesymbol) wird ein Dropdownmenü mit den folgenden Elementen geöffnet:

Schaltfläche "DevTools schließen"

Klicken Sie auf die Schaltfläche DevTools schließen (DevTools-Symbol schließen) in der oberen rechten Ecke von DevTools, um DevTools zu schließen und das gesamte Fenster zu verwenden, um die aktuelle Webseite anzuzeigen.

Features der Symbolleiste "Schnellansicht"

Verwenden Sie den Bereich Schnellansicht , um ein zweites Tool unterhalb oder rechts neben dem Tool zu öffnen, das bereits in der Aktivitätsleiste ausgewählt ist:

  1. Wählen Sie in der Aktivitätsleiste ein Tool aus.

  2. Klicken Sie auf der Symbolleiste der Schnellansicht auf Weitere Tools (Symbol Weitere Tools), und wählen Sie dann ein anderes Tool aus der Liste aus.

Öffnen Sie beispielsweise das Renderingtool im Bereich Schnellansicht unterhalb des In der Aktivitätsleiste geöffneten Netzwerktools:

DevTools mit dem Netzwerktool oben und dem Renderingtool am unteren Rand

Klicken Sie zum Ausblenden oder Erweitern der Schnellansicht auf Schnellansicht reduzieren (Symbol 'Reduzieren') oder 'Schnellansicht erweitern' (Symbol 'Erweitern'), oder drücken Sie die ESCAPE-TASTE.

Übersicht über alle Tools

Eine Zusammenfassung der einzelnen Tools finden Sie unter Übersicht über alle Tools in Informationen zur Liste der Tools.

Tool, Registerkarte oder Panel

Die Wörter "tool", "tab" und "panel" sind etwas austauschbar. Im Befehlsmenü werden die Tools als Panels bezeichnet. Das Tool Elemente wird beispielsweise als Bereich Elemente bezeichnet. Um zum Tool Elemente zu wechseln, klicken Sie auf die Registerkarte Elemente . Es gibt eine Schaltfläche "Weitere Tools " (Symbol ") und eine Liste, die zum Auswählen von Tools verwendet wird. DevTools-Tools werden auch als DevTools-Panels bezeichnet.

Sie können jedes der Tools anpassen, und der Inhalt eines Tools kann sich basierend auf dem Kontext ändern.

Informationen zu Aktivitätsleisten und Schnellansichtstools

Die Schaltfläche Weitere Tools (Symbol ") wird sowohl in der Aktivitätsleiste als auch in der Symbolleiste "Schnellansicht" angezeigt. Wenn Sie ein Tool aus der Liste Weitere Tools öffnen, die sich in der Aktivitätsleiste befindet, wird das Tool in der Aktivitätsleiste angezeigt. Wenn Sie ein Tool aus der Liste Weitere Tools in der Symbolleiste "Schnellansicht" öffnen, wird das Tool im Bereich Schnellansicht geöffnet.

Aufgabe Schritte
Öffnen eines Tools in der Aktivitätsleiste am oberen Rand von DevTools Klicken Sie in der Aktivitätsleiste oben in DevTools auf Weitere Tools (Symbol Weitere Tools), und wählen Sie dann ein Tool aus.
Öffnen eines Tools auf der Symbolleiste "Schnellansicht" Wenn DevTools den Fokus hat, drücken Sie ESC , um die Symbolleiste für die Schnellansicht anzuzeigen, falls sie noch nicht angezeigt wird. Klicken Sie auf der Symbolleiste der Schnellansicht auf die Schaltfläche Weitere Tools (Symbol weitere Tools), und wählen Sie dann ein Tool aus.
Verschieben eines Tools von der Symbolleiste " Schnellansicht" auf die Aktivitätsleiste Wenn DevTools den Fokus hat, drücken Sie ESC , um die Schnellansicht anzuzeigen. Klicken Sie auf der Symbolleiste Schnellansicht mit der rechten Maustaste auf die Registerkarte des Tools, und wählen Sie dann In die obere Aktivitätsleiste verschieben oder Aktivitätsleiste nach links verschieben aus.
Verschieben eines Tools von der Aktivitätsleiste in die Symbolleiste "Schnellansicht" Klicken Sie in der Aktivitätsleiste mit der rechten Maustaste auf die Registerkarte des Tools, und wählen Sie dann In die untere Schnellansicht verschieben oder Schnellansicht zur Seite verschieben aus.
Öffnen eines Tools in der Standardsymbolleiste (Aktivitätsleiste oder Schnellansicht) Wenn DevTools den Fokus hat, öffnen Sie das Befehlsmenü , indem Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS) drücken. Geben Sie den Namen des Tools ein, und wählen Sie dann den Befehl Tool> anzeigen < aus.

Zusätzlich zu aktivitätsleisten - und Schnellansichtstools umfasst DevTools die folgenden Tools:

Siehe auch

Energietipp: Verwenden des Befehlsmenüs

DevTools bietet viele Features und Funktionen für die Verwendung mit Ihrer Website. Sie können auf verschiedene Arten auf die verschiedenen Teile von DevTools zugreifen, aber häufig ist es eine schnelle Möglichkeit, das Befehlsmenü zu verwenden.

Das Befehlsmenü in DevTools

Im Befehlsmenü werden die Tools als "Panels" bezeichnet. Das Tool Elemente wird beispielsweise als Bereich Elemente bezeichnet. Um zum Tool Elemente zu wechseln, wählen Sie die Registerkarte Elemente aus.

  1. Führen Sie eine der folgenden Aktionen aus, um das Befehlsmenü zu öffnen:

    • Klicken Sie auf die Schaltfläche DevTools anpassen und steuern (DevTools anpassen und steuern), und wählen Sie dann Befehl ausführen aus.
    • Drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS).

    Im Befehlsmenü können Sie Befehle zum Anzeigen, Ausblenden oder Ausführen von Features in DevTools eingeben.

  2. Beginnen Sie im Befehlsmenü mit der Eingabe des Namens eines Tools, z. B. Änderungen, und wählen Sie dann den Befehl Anzeigen aus, z. B. Änderungen anzeigen. Im Befehlsmenü werden die übereinstimmenden Befehle angezeigt:

    Im Befehlsmenü werden die Optionen angezeigt, nachdem Sie

  3. Drücken Sie die EINGABETASTE , um einen Befehl Anzeigen auszuwählen, z. B. Änderungen anzeigen. Das ausgewählte Tool wird im Bereich Schnellansicht unten geöffnet:

    DevTools mit geöffnetem Änderungstool im Bereich

    Das Tool "Änderungen" ist nützlich, wenn Sie CSS bearbeiten. In diesem Beispiel bietet das Befehlsmenü eine schnelle Alternative zur Auswahl von Weitere Tools (Symbol weitere Tools) und dann Änderungen. Dieses Beispiel bietet auch eine Alternative zum Bearbeiten einer .js Datei im Quellentool . Klicken Sie dann mit der rechten Maustaste, und wählen Sie Lokale Änderungen aus.

Siehe auch Ausführen von Befehlen mit dem Microsoft Edge DevTools-Befehlsmenü.

Anpassen von DevTools

Sie können DevTools so anpassen, dass sie Ihren Anforderungen für ihre Arbeitsweise entsprechen. Klicken Sie zum Ändern der Einstellungen auf die Schaltfläche DevTools anpassen und steuern (DevTools anpassen und steuern), und wählen Sie dann Einstellungen (Symbol Einstellungen) aus, oder drücken Sie F1.

Auf der Seite Einstellungen>können Sie verschiedene Teile von DevTools ändern. Sie können z. B. die Spracheinstellung der Browser-Benutzeroberfläche verwenden, um dieselbe Sprache in DevTools zu verwenden, die in Ihrem Browser verwendet wird. Verwenden Sie für ein weiteres Beispiel die Einstellung Design , um das Farbdesign von DevTools zu ändern.

Alle Einstellungen in DevTools

Sie können auch die Einstellungen erweiterter Features ändern, z. B.:

  • Fügen Sie einem Arbeitsbereich lokale Dateien hinzu.
  • Filtern Sie Bibliothekscode mithilfe der Liste "Ignorieren".
  • Definieren Sie die Geräte , die Sie in den Gerätesimulations- und Testmodus einschließen möchten. Weitere Informationen finden Sie unter Emulate mobile devices (Device Emulation).
  • Wählen Sie ein Netzwerkeinschränkungsprofil aus.
  • Definieren sie simulierte Speicherorte.
  • Anpassen von Tastenkombinationen Wenn Sie beispielsweise in DevTools die gleichen Tastenkombinationen wie in Visual Studio Code verwenden möchten, wählen Sie Verknüpfungen aus voreingestelltem>Visual Studio Code abgleichen aus.

Alle Tastenkombinationen und das Menü, die jeweils mit den Tastenkombinationen in Visual Studio Code übereinstimmen

Ausprobieren von experimentellen Features

Das DevTools-Team stellt neue Features als Experimente in DevTools bereit. Sie können jedes der Experimente aktivieren oder deaktivieren. Um die vollständige Liste der experimentellen Features in Microsoft Edge DevTools anzuzeigen, wählen Sie in DevTools Einstellungen (Symbol Einstellungen) und dann Experimente aus.

Um eine Vorschau der neuesten Features für DevTools anzuzeigen, laden Sie Microsoft Edge Canary herunter, das nachts erstellt wird.

Siehe auch:

Siehe auch