Übersicht über DevTools

  • Artikel
  • 15 Minuten Lesedauer

Der Microsoft Edge-Browser enthält integrierte Webentwicklungstools, die als Microsoft Edge DevTools bezeichnet werden. DevTools ist eine Reihe von Webentwicklungstools, die neben einer gerenderten Webseite im Browser angezeigt werden. DevTools bietet eine leistungsstarke Möglichkeit zum Überprüfen und Debuggen von Webseiten und Web-Apps. Sie können sogar Quelldateien bearbeiten und Websiteprojekte erstellen, alles innerhalb der DevTools-Umgebung.

Mit DevTools können Sie folgende Aktionen ausführen:

  • Untersuchen, optimieren und ändern Sie die Formatvorlagen von Elementen auf der Webseite mithilfe von Live-Tools 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 Dateiformaten.

  • 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 Ort der Probleme an.

  • Debuggen Sie Ihr JavaScript mithilfe des Haltepunkt-Debuggings und mit der Live-Konsole. Finden Sie Speicherprobleme und Renderingprobleme mit Ihren Web-Apps.

  • Suchen Sie nach Barrierefreiheits-, Leistungs-, Kompatibilitäts- und Sicherheitsproblemen 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.

Öffnen von DevTools

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

Hauptmöglichkeiten:

Aktion Resultierendes Tool
Klicken Sie mit der rechten Maustaste auf ein beliebiges Element auf einer Webseite, und wählen Sie dann "Überprüfen" aus. Das Elementtool mit erweiterter DOM-Struktur, um das mit der rechten Maustaste geklickte Seitenelement anzuzeigen.
Drücken Sie Ctrl++Shift``I (Windows, Linux) oder Command+Option+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 "Einstellungen und mehr") > Weitere Tools > aus Entwicklungstools. Das zuvor verwendete Tool oder das Willkommenstool .
Drücken Sie Ctrl++Shift``J (Windows, Linux) oder Command+Option+J (macOS). Das Konsolentool .
Drücken Sie Ctrl++Shift``C (Windows, Linux) oder Command+Option+C (macOS). Das Elementtool, mit erweiterter DOM-Struktur, um das <body> Element anzuzeigen.
Drücken Sie Shift+F10 , um das Kontextmenü zu öffnen. Um den Befehl Inspect auszuwählen, drücken Up Arrow Sie und dann Enter. Das Elementtool, mit erweiterter DOM-Struktur, um das <html> Element anzuzeigen.
Drücken Tab Und Shift+Tab setzen Sie den Fokus auf ein Seitenelement. Drücken Sie Shift+F10 dann, um das Kontextmenü zu öffnen. Um den Befehl Inspect auszuwählen, drücken Up Arrow Sie und dann Enter. Das Elementtool mit erweiterter DOM-Struktur, um das Element mit Relevanz 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 "Überprüfen" auszuwählen:

Um DevTools zu öffnen, klicken Sie mit der rechten Maustaste auf ein beliebiges Element auf einer Webseite, und wählen Sie dann "Überprüfen" aus.

DevTools wird geöffnet, wobei das element mit der rechten Maustaste in der DOM-Struktur im Elementtool hervorgehoben ist:

DevTools wird geöffnet, wobei im Elementtool mit der rechten Maustaste auf das Element geklickt wird.

Öffnen von DevTools mithilfe der Microsoft Edge-Symbolleiste

Auf der Microsoft Edge-Symbolleiste können Sie Einstellungen und mehr (...) > weitere Tools > auswählen Entwicklungstools:

Wählen Sie auf der Microsoft Edge-Symbolleiste "Einstellungen und mehr" > "Weitere Tools" > "Entwicklungstools" aus.

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

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

  1. Öffnen Sie an der Befehlszeile Microsoft Edge, und übergeben Sie 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"

    Bash-Shell unter macOS:

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

    Bash-Shell unter Linux:

    microsoft-edge-dev --auto-open-devtools-for-tabs

Deaktivieren der F12-Tastenkombination

So verhindern Sie das Öffnen von DevTools durch Drücken F12 :

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

  2. Deaktivieren Sie im Abschnitt "Entwicklertools " die Option "DevTools öffnen", wenn die Taste F12 gedrückt wird .

    Deaktivieren Sie in den Edgeeinstellungen die F12-Taste zum Öffnen von DevTools.

Tastaturunterstützung

Sie können mit DevTools mithilfe der Maus oder Tastatur interagieren. Tastenkombinationen bieten eine schnelle Möglichkeit für den Zugriff auf Funktionen und sind für die Barrierefreiheit erforderlich. Verschiedene Tools werden zunehmend über die Tastatur und Hilfstechnologien wie Bildschirmsprachausgaben zugänglich.

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

Ändern der Docking-Position von DevTools im Browser

Sie können DevTools rechts, links oder unten im Browser andocken oder in einem separaten Fenster abdocken. Siehe DevTools-Platzierung ändern (Abdocken, Unten andocken, Andocken nach links).

Vergrößern oder Verkleinern von DevTools

Die DevTools-Benutzeroberfläche wird mitHILFE von HTML und CSS wie Webseiten implementiert, sodass Sie mithilfe der Standardtastaturverknüpfungen 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 in DevTools auf eine beliebige Stelle.
  2. Drücken Ctrl++ Oder Ctrl+- (Windows oder Linux). Oder drücken Command++ Oder Command+- (macOS).

DevTools verkleinert.

Um die gerenderte Seite zu zoomen, 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 DevTools oder die gerenderte Seite.
  2. Drücken Ctrl``0+oder Ctrl``NumPad0+(Windows oder Linux) oder Command+0 (macOS).

So zoomen Sie 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" (Symbol "Anpassen") und steuern Sie sie, und wählen Sie dann den Befehl "Ausführen" aus.
  2. Beginnen Sie im Befehlsmenü mit der Eingabe des Zooms, und wählen Sie dann einen Zoombefehl aus:
    • Zoomfaktor zurücksetzen
    • Vergrößern
    • Verkleinern

Anzeigen von DevTools-QuickInfos

Das DevTools-QuickInfos-Feature hilft Ihnen, mehr über alle verschiedenen Tools und Bereiche zu erfahren. Bewegen Sie den Mauszeiger über die einzelnen umrissenen Bereiche von DevTools, um weitere Informationen zur Verwendung des Tools zu erhalten. Führen Sie eine der folgenden Aktionen aus, um Tooltips zu aktivieren:

  • Wählen Sie Anpassen und steuern von DevTools (...) > Hilfe > Umschalten der DevTools-QuickInfos.
  • Drücken Sie Ctrl++Shift``H (Windows, Linux) oder Cmd+Shift+H (macOS).
  • Öffnen Sie das Befehlsmenü, und geben Sie tooltipsdann ein.

Zeigen Sie dann auf die einzelnen umrissenen Regionen von DevTools:

DevTools-QuickInfos.

Um Tooltips zu deaktivieren, drücken Sie Esc.

Features der Hauptsymbolleiste

DevTools bietet Ihnen eine erstaunliche Menge an Leistung, um die derzeit im Browser angezeigte Website zu untersuchen, zu debuggen und zu ändern. Die meisten Tools zeigen die Änderungen live an. Liveupdates machen die Tools unglaublich nützlich, um das Aussehen und die Navigation oder die Funktionalität eines Webprojekts zu verfeinern, ohne es aktualisieren oder erstellen zu müssen.

Toolpanels mit Registerkarten und Seiten

Abgesehen von einigen Symboltools (Inspect-Tool und Geräteemulation) ist DevTools in und eine Reihe von Tools im Registerkartenformat unterteilt, z. B. das Elementtool , 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:

Die Tools sind in einer Reihe von Registerkarten auf der Hauptsymbolleiste und auf der Schubladensymbolleiste 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 Hauptsymbolleiste und der Drawer-Symbolleiste vorhanden sein kann.

Registerkarten auf niedrigerer Ebene:

Innerhalb des Bereichs einiger Tools gibt es eine oder mehrere Gruppen von Registerkarten (Registerkartenbereiche). Das Elementtool enthält z. B. eine Reihe von Registerkarten, die Formatvorlagen, Ereignislistener und Barrierefreiheitsregisterkarten enthalten. Bei anderen Tools enthält der Bereich des Tools Seiten, die auf der linken Seite aufgeführt sind.

Die Hauptsymbolleiste und die Schubladensymbolleiste

Es gibt zwei Symbolleisten: die Hauptsymbolleiste oben in DevTools und die Schublade am unteren Rand, wenn Sie drücken Esc.

Die Hauptsymbolleiste enthält die folgenden Features:

  • Symboltools:

    • Umschaltfläche "Tool prüfen " (Symbol "Tool prüfen").
    • Schaltfläche "Geräteemulation" (Symbol "Geräteemulation").

  • Toolregisterkarten:

    • Willkommenstool .
    • Elementtool . Permanent sind.
    • Konsolentool . Permanent sind.
    • Quellentool . Permanent sind.
    • Netzwerktool .
    • Leistungstool .
    • Speichertool .
    • Anwendungstool .
    • Sicherheitstool .
    • Leuchtturm-Werkzeug .
    • CSS-Übersichtstool .

  • Symbole:

    • Schaltfläche "Weitere Registerkarten" (Symbol "Weitere Registerkarten").
    • Schaltfläche "Weitere Tools" (Symbol "Weitere Tools").
    • Schaltfläche "JavaScript-Fehlerindikator" (Symbol "JavaScript-Fehlerindikator").
    • Schaltfläche "Problemindikator" (Symbol "Problemindikator").
    • Schaltfläche "Einstellungen" (Symbol "Einstellungen").
    • Schaltfläche "Feedback senden" (Symbol "Feedback senden").
    • Anpassen und Steuern der Menüschaltfläche "DevTools " (Symbol "Anpassen").
    • Schließen DevTools (DevTools-Symbol schließen).)

Die Hauptsymbolleiste mit Beschriftungen, die ihre Features identifizieren.

Die Symbolleistenfeatures werden unten beschrieben.

Inspect-Tool

Wenn Sie auf die Schaltfläche " Tool prüfen " (Symbol "Tool prüfen") klicken, können Sie ein Element auf der aktuellen Webseite auswählen. Während das Inspect-Tool aktiv ist, können Sie den Mauszeiger über verschiedene Teile der Webseite bewegen, um detaillierte Informationen zu Seitenelementen zu erhalten, zusammen mit einer mehrfarbigen Überlagerung, die die Layoutabmessungen, den Abstand und den Rand des Seitenelements anzeigt.

Das Inspect-Tool beim Daraufzeigen mit der ersten Überschrift dieses Artikels.

Geräteemulation

Klicken Sie auf die Schaltfläche " Geräteemulation " (Symbol "Geräteemulation") um die aktuelle Website in einem emulierten Gerätemodus anzuzeigen. Mit dem Tool zur Geräteemulation können Sie ausführen und testen, wie Ihr Produkt reagiert, wenn Sie die Größe des Browsers ändern. Es gibt Ihnen auch eine Einschä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 der DevTools, wie Sie das Team kontaktieren können, und stellt Informationen zu bestimmten Features bereit.

Elementtool

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

Das Elementtool ist immer auf der Hauptsymbolleiste vorhanden.

Konsolentool

Im Konsolentool haben Sie folgende Möglichkeiten:

  • Anzeigen und Filtern protokollierter Nachrichten aus Netzwerkanforderungen oder aus JavaScript-Protokollanweisungen.
  • Geben Sie JavaScript-Anweisungen ein, die in Echtzeit ausgewertet werden sollen. 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 Hauptsymbolleiste und auf der Drawer-Symbolleiste vorhanden.

Siehe Konsole.

Quellen-Tool

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 immer auf der Hauptsymbolleiste vorhanden.

Network-Tool

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 unterschiedliche Netzwerkbedingungen simulieren.

Siehe "Netzwerkaktivität prüfen".

Leistungstool

Weitere Informationen finden Sie unter "Erste Schritte mit der Analyse der Laufzeitleistung".

Speichertool

Siehe Beheben von Speicherproblemen.

Anwendung-Tool

Siehe "Anzeigen, Bearbeiten und Löschen von Cookies".

Sicherheitstool

Weitere Informationen finden Sie unter Grundlegendes zu Sicherheitsproblemen mithilfe des Sicherheitstools.

Lighthouse-Tool

Siehe Leuchtturm-Tool.

CSS-Übersichtstool

Identifizieren potenzieller CSS-Verbesserungen.

Siehe CSS-Übersichtstool.

Schaltfläche 'Weitere Registerkarten'

Wenn Sie ein Tool anzeigen möchten, das geöffnet, aber ausgeblendet ist, weil das Fenster zu schmal ist, klicken Sie auf die Schaltfläche "Weitere Registerkarten" (Symbol "Weitere Registerkarten").

Schaltfläche "Weitere Tools"

Wenn Sie der Symbolleiste ein Tool hinzufügen möchten, klicken Sie auf die Schaltfläche "Weitere Tools" (Symbol "Weitere Tools").

JavaScript-Fehlerindikator

Die Schaltfläche " JavaScript-Fehlerindikator " (Symbol "JavaScript-Fehlerindikator") zeigt Folgendes an:

  • Ein roter Kreis mit einem X, gefolgt von der Anzahl der JavaScript-Fehler, die automatisch auf der aktuellen Webseite erkannt wurden.

  • Ein gelbes Dreieck mit einem Ausrufezeichen, gefolgt von der Anzahl der JavaScript-Warnungen, die auf der aktuellen Webseite automatisch erkannt wurden.

Die QuickInfo für die JavaScript-Zählerschaltfläche ist " Konsole öffnen", um #-Fehler, #-Warnungen anzuzeigen.

Klicken Sie auf den JavaScript-Fehlerindikator, um die Konsole zu öffnen, und erfahren Sie mehr über den Fehler.

Problemindikator

Die Schaltfläche " Problemindikator " (Symbol "Problemindikator") zeigt die Anzahl der HTML- oder CSS-Probleme an, die automatisch auf der aktuellen Webseite gefunden werden.

Die QuickInfo für den Problemindikator ist "Offene Probleme" zum Anzeigen von #-Problemen. Das Symbol der Schaltfläche ist ein blaues Sprechblasensymbol, gefolgt von der Anzahl der HTML- oder CSS-Probleme.

Klicken Sie auf den Problemindikator , um das Tool "Probleme " zu öffnen.

Schaltfläche "Einstellungen"

Um die DevTools-Einstellungswebseite zu öffnen, klicken Sie auf die Schaltfläche " Einstellungen " (Symbol "Einstellungen"). Die Seite "Einstellungen" enthält die folgenden Unterseiten:

  • Voreinstellungen
  • Arbeitsbereich
  • Versuche
  • Bibliothekscode
  • Geräte
  • Drosselung
  • Standorte
  • Tastenkombinationen
  • Symbolserver

Siehe "Einstellungen" in "DevTools anpassen".

Schaltfläche "Feedback senden"

Klicken Sie zum Öffnen des Dialogfelds " Feedback senden " auf die Schaltfläche " Feedback senden " (Symbol "Feedback senden"). Das Dialogfeld "Feedback senden " wird geöffnet. Geben Sie Informationen ein, um zu beschreiben, was geschehen ist, und fügen Sie automatisch einen Screenshot ein. Verwenden Sie "Feedback senden ", um eine Verbindung mit dem DevTools-Team herzustellen, um Probleme zu melden, Probleme zu melden oder Ideen vorzuschlagen.

Weitere Informationen finden Sie im Microsoft Edge DevTools-Team.

Anpassen und Steuern des DevTools-Menüs

Mit der Schaltfläche "DevTools anpassen und steuern " (DevTools anpassen und steuern) wird ein Dropdownmenü geöffnet, in dem Sie definieren können, wo DevTools angedockt, gesucht, verschiedene Tools geöffnet werden und vieles mehr.

Schaltfläche "DevTools schließen"

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

Ü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 Bereich

Häufig werden die Wörter "tool", "tab" oder "panel" synonym verwendet. Im Befehlsmenü werden die Tools als Panels bezeichnet. Das Elementtool wird z. B. als Elementpanel bezeichnet. Um zum Elementtool zu wechseln, wählen Sie die Registerkarte "Elemente" aus . Es gibt eine Schaltfläche " Weitere Tools " (+) und eine Liste sowie eine Schaltfläche " Weitere Registerkarten " auf der Symbolleiste, die beide zum Auswählen von Tools verwendet werden, die auch als Panels bezeichnet werden.

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

Informationen zu Panel- und Drawer-Tools

Die in den Weiteren Tools (+) aufgeführten Tools können entweder als Paneltool (auf der Hauptsymbolleiste) oder als Drawer-Tool (auf der Drawer-Symbolleiste) angezeigt werden. Im Befehlsmenü wird jedes dieser Tools entweder als Paneltool oder als Drawer-Tool bezeichnet. Sie können sie jedoch entweder der Hauptsymbolleiste oder der Drawer-Symbolleiste hinzufügen, und Sie können eine der folgenden Methoden verwenden, um sie zu öffnen oder zwischen den beiden Symbolleisten zu verschieben.

Verwenden Sie das Menü "Weitere Tools (+)", um eines der Panel- oder Drawer-Tools auszuwählen. Ein Menü "Weitere Tools " wird an mehreren Stellen angezeigt:

  • Klicken Sie oben rechts in DevTools auf der Hauptsymbolleiste auf die Schaltfläche "DevTools anpassen und steuern", zeigen Sie auf den Befehl "Weitere Tools", und wählen Sie dann ein Tool aus.

  • Auf der Hauptsymbolleiste am oberen Rand von DevTools (wobei Paneltools normalerweise angezeigt werden).

  • Auf der Schubladensymbolleiste (in der die Drawer-Tools normalerweise angezeigt werden).

Aufgabe Schritte
Öffnen eines Tools auf der Hauptsymbolleiste oben in DevTools Klicken Sie auf der Hauptsymbolleiste oben in DevTools auf Weitere Tools (+), und wählen Sie dann ein Tool aus.
Öffnen eines Tools auf der Schubladensymbolleiste Wenn DevTools den Fokus hat, drücken Sie ESC , um die Schublade anzuzeigen. Klicken Sie auf der Schubladensymbolleiste auf Weitere Tools (+), und wählen Sie dann ein Tool aus.
Verschieben eines Tools von der Schubladensymbolleiste zur Hauptsymbolleiste Wenn DevTools den Fokus hat, drücken Sie ESC , um die Schublade anzuzeigen. Klicken Sie auf der Schubladensymbolleiste mit der rechten Maustaste auf die Registerkarte des Tools, und wählen Sie dann " Nach oben verschieben" aus.
Verschieben eines Tools von der Hauptsymbolleiste in die Schubladensymbolleiste Klicken Sie auf der Hauptsymbolleiste mit der rechten Maustaste auf die Registerkarte des Tools, und wählen Sie dann " Nach unten verschieben" aus.
Öffnen eines Tools auf der Standardsymbolleiste Wenn DevTools den Fokus hat, öffnen Sie das Befehlsmenü, indem Sie (Windows, Linux) oderP Command++Shift(macOS) drücken.Ctrl+Shift+P Geben Sie den Namen des Tools ein, und wählen Sie dann das Tool aus.

Neben Paneltools und Drawer-Tools umfasst DevTools die folgenden Tools:

Siehe auch

Powertipp: Verwenden des Befehlsmenüs

DevTools bietet viele Features und Funktionen, die Sie mit Ihrer Website verwenden können. Sie können auf viele 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 Elementtool wird z. B. als Elementpanel bezeichnet. Um zum Elementtool zu wechseln, wählen Sie die Registerkarte "Elemente" aus .

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

  • Klicken Sie auf die Schaltfläche "DevTools anpassen und steuern " (Anpassen und Steuern von DevTools), und wählen Sie dann den Befehl "Ausführen" aus.

  • Drücken Sie Ctrl++Shift``P (Windows, Linux) oder Command+Shift+P (macOS).

Im Befehlsmenü können Sie Befehle zum Anzeigen, Ausblenden oder Ausführen von Features in DevTools eingeben. Geben Sie bei geöffnetem Befehlsmenü das Wort "Änderungen" ein, und wählen Sie dann "Schublade: Änderungen anzeigen" aus.

Das Tool "Änderungen" wird geöffnet, was beim Bearbeiten von CSS hilfreich ist. In diesem Fall bietet das Befehlsmenü eine schnelle Alternative zum Auswählen von "Weitere Tools (...) " und dann zum Auswählen von Änderungen oder zum Bearbeiten einer .js Datei im Tool "Quellen ". Klicken Sie dann mit der rechten Maustaste, und wählen Sie " Lokale Änderungen" aus.

Nachdem Sie cha eingegeben haben, werden im Befehlsmenü die folgenden Optionen angezeigt:

Im Befehlsmenü werden die Optionen angezeigt, nachdem Sie "cha" eingegeben haben, einschließlich "Tool "Änderungen in der Schublade anzeigen".

Drücken Sie Enter, und das Tool "Änderungen" wird geöffnet:

DevTools mit geöffnetem Tool "Änderungen".

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

Anpassen von DevTools

Sie können DevTools an Ihre Anforderungen für Ihre Arbeitsweise anpassen. Um Einstellungen zu ändern, klicken Sie auf "Einstellungen" (das Zahnradsymbol oben rechts), oder drücken Sie F1.

Auf der Seite "Einstellungen > " können Sie mehrere Teile von DevTools ändern. Sie können z. B. die Einstellung " Übereinstimmung mit der Browsersprache " verwenden, um dieselbe Sprache in DevTools zu verwenden, die in Ihrem Browser verwendet wird. Verwenden Sie für ein weiteres Beispiel die Designeinstellung , 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 des Bibliothekscodes mit der Ignorierliste.
  • Definieren Sie die Geräte, die Sie in den Gerätesimulations- und Testmodus einbeziehen möchten. Weitere Informationen finden Sie unter Mobile Geräte emulieren (Geräteemulation).
  • Wählen Sie ein Netzwerkeinsteuerungsprofil aus.
  • Definieren Sie simulierte Speicherorte.
  • Anpassen von Tastenkombinationen Wenn Sie z. B. die gleichen Tastenkombinationen in DevTools wie in Visual Studio Code verwenden möchten, wählen Sie " Übereinstimmende Verknüpfungen" aus voreingestelltem > Visual Studio Code aus.

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

Ausprobieren experimenteller Features

Das DevTools-Team stellt neue Features als Experimente in DevTools bereit. Sie können die einzelnen Experimente aktivieren oder deaktivieren. Um die vollständige Liste der experimentellen Features anzuzeigen, wählen Sie in DevTools "Einstellungen" (das Zahnradsymbol) 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