Übersicht über DevTools

Der Microsoft Edge-Browser verfügt über integrierte Webentwicklungstools namens Microsoft Edge DevTools. DevTools ist eine Reihe von Webentwicklungstools, die neben einer gerenderten Webseite im Browser angezeigt werden.

Detaillierter Inhalt:

Einführung

DevTools bietet eine leistungsstarke Möglichkeit zum Untersuchen und Debuggen von Webseiten und Web-Apps. Sie können sogar Quelldateien bearbeiten und Websiteprojekte erstellen, und das alles innerhalb der DevTools-Umgebung.

Mit DevTools können Sie Folgendes tun:

  • Untersuchen, optimieren und ändern Sie die Formatvorlagen von Elementen auf der Webseite mithilfe von Live-Tools mit einer visuellen Benutzeroberfläche. Untersuchen 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. Untersuchen Sie den Netzwerkverkehr, und sehen Sie sich den Ort der Probleme an.

  • Debuggen Sie Ihr JavaScript mithilfe von Breakpoint-Debugging und mit der Livekonsole. Suchen Sie Speicher- und Renderingprobleme in Ihren Web-Apps.

  • Suchen Sie Barrierefreiheits-, Leistungs-, Kompatibilitäts- und Sicherheitsprobleme 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 Benutzeroberfläche von DevTools

Miniaturbild für Video

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

  • Anstelle der Aktivitätsleiste zeigt das Video die alte Hauptsymbolleiste.
  • Anstelle des Schnellansichtsbereichs (unten in DevTools) zeigt das Video die Schublade.

Öffnen von DevTools

In Microsoft Edge können Sie DevTools mithilfe 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 Elemente-Tool mit erweiterter DOM-Struktur, um das mit der rechten Maustaste angeklickte 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 .

Zusätzliche Möglichkeiten:

Aktion Resultierendes Tool
Wählen Sie in der Microsoft Edge-Symbolleiste "Einstellungen" und mehr aus (Das Symbol >Weitere Tools>:Entwicklungstools. 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 Elemente-Tool mit erweiterter DOM-Struktur, um das <body> Element anzuzeigen.
Drücken Sie UMSCHALT+F10 , um das Kontextmenü zu öffnen. Um den Befehl "Überprüfen " auszuwählen, drücken Sie die NACH-OBEN-TASTE und dann die EINGABETASTE. Das Elemente-Tool 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 "Überprüfen " auszuwählen, drücken Sie die NACH-OBEN-TASTE und dann die EINGABETASTE. Das Elemente-Tool mit erweiterter DOM-Struktur, um das fokussierte Seitenelement anzuzeigen.

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

Eine gute Möglichkeit, DevTools zu öffnen, 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

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

DevTools, die auf der rechten Seite von Microsoft Edge geöffnet sind, wobei ein DOM-Element in der DOM-Struktur im Tool

Öffnen von DevTools mithilfe der Microsoft Edge-Symbolleiste

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

Das Menü

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

Gehen Sie so vor, dass DevTools automatisch geöffnet wird, wenn Sie eine neue Registerkarte im Browser öffnen:

  1. Öffnen Sie Microsoft Edge in der Befehlszeile 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"

    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
Startup-Boost deaktivieren

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

Das Feature "Startup-Boost" sorgt dafür, dass ein minimaler Microsoft Edge-Prozess im Hintergrund ausgeführt wird. Dies beeinträchtigt das Feature und müsste für die auto-open-devtools-for-tabs Verwendung deaktiviert werden. Weitere Informationen finden Sie unter Hilfe zur Startup-Boost.

Deaktivieren der Tastenkombination F12

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

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

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

    Die Seite

Tastaturunterstützung

Sie können mit DevTools über die Maus oder Tastatur interagieren. Tastenkombinationen bieten eine schnelle Möglichkeit zum 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 Hilfstechnologien.

Ändern der Position im Browser, an der DevTools angedockt ist

Sie können DevTools rechts, links oder unten im Browser andocken oder in einem separaten Fenster abdocken. Weitere Informationen finden Sie unter Ändern der DevTools-Platzierung (Abdocken, Dock nach unten, Dock nach links).

DevTools vergrößern oder verkleinern

Die DevTools-Benutzeroberfläche wird mithilfe von HTML und CSS implementiert, z. B. Webseiten, sodass Sie mit den 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 irgendwo 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 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 Sie STRG+0 oder STRG+Ziffernblock 0 (Windows oder Linux) bzw. BEFEHL+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 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 weist die folgenden Hauptbereiche auf:

  • Die Aktivitätsleiste oben mit Symbolen für den Zugriff auf Tools, Einstellungen, Dokumentation und mehr.

    • Der aktuelle Toolbereich, in dem das Tool angezeigt wird, das derzeit in der Aktivitätsleiste ausgewählt ist.

  • Die Symbolleiste für die Schnellansicht unten mit Registerkarten für den Zugriff auf Tools.

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

Microsoft Edge, mit seitlich geöffneten DevTools, wobei die 4 Hauptbereiche der Benutzeroberfläche hervorgehoben sind

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

  • Inspect-Tool (Symbol für Inspiziertool) Umschaltfläche

  • Geräteemulationstool (Symbol ").

  • Willkommenstool (Symbol für Willkommenstool).

  • Elementtool (Elementtoolsymbol).

  • Konsolentool (Symbol des Konsolentools).

  • Quellen-Tool (Quellen-Tool-Symbol).

  • Netzwerktool (Symbol ").

  • Leistungstool (Symbol ").

  • Speichertool (Speichertoolsymbol).

  • Anwendungstool (Symbol ").

Standardmäßig enthält die Symbolleiste für die Schnellansicht die folgenden Tools:

  • Konsolentool (Symbol des Konsolentools).

  • Probleme-Tool (Symbol

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

Ändern des Speicherorts der Schnellansicht

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

Um den Schnellansichtsbereich anzuzeigen, drücken Sie ESC.

Klicken Sie zum Ändern der Position des Schnellansichtsbereichs in der Symbolleiste für die Schnellansicht auf die Schaltfläche "Schnellansicht rechts andocken oder auf die Schaltfläche "Schnellansicht unten andocken":

Das Symbol

Funktionen der Aktivitätsleiste

DevTools bietet Ihnen eine beeindruckende 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 nützlich, um das Aussehen und die Navigation oder die Funktionalität einer Webseite zu verfeinern, ohne sie aktualisieren oder erstellen zu müssen.

Toolpanels im Registerkartenformat, die Registerkarten und Seiten enthalten

Abgesehen vom Untersuchungstool und der Geräteemulation ist DevTools in eine Reihe von Tools auf Registerkarten unterteilt, z. B . das Elementtool, das Konsolentool und das Tool Quellen . Innerhalb des Befehlsmenüs werden Werkzeuge als Bedienfelder 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" organisiert. Die meisten Werkzeuge werden auch als Panels bezeichnet. Ein Panel ist die innere Benutzeroberfläche eines Tools. Ein Tool verfügt über eine Registerkarte, die in der Aktivitätsleiste und auf der Symbolleiste für die Schnellansicht vorhanden sein kann.

Registerkarten auf niedrigerer Ebene:

Im Bereich einiger Tools gibt es eine oder mehrere Gruppen von Registerkarten (Bereiche im Registerkartenformat). Beispielsweise enthält das Tool "Elemente" eine Reihe von Registerkarten, die Registerkarten "Formatvorlagen", " Ereignislistener" und "Barrierefreiheit" enthalten. Bei anderen Tools sind im Bereich des Tools Seiten auf der linken Seite aufgeführt.

Die Aktivitätsleiste und die Symbolleiste "Schnellansicht"

Es gibt zwei Symbolleisten: die Aktivitätsleiste oben in DevTools und die Symbolleiste Schnellansicht unten, wenn Sie Esc drücken.

Die Aktivitätsleiste enthält die folgenden Features:

  • Symboltools:
    • Inspect-Tool (Symbol für Inspiziertool) Umschaltfläche
    • Geräteemulation (Symbol ").

  • Registerkarten "Tooltools":

    • Willkommenstool .
    • Elemente-Tool . Dauerhaft.
    • Konsolentool . Dauerhaft.
    • Quellen-Tool . Dauerhaft.
    • Netzwerktool .
    • Leistungstool .
    • Speichertool .
    • Anwendungstool .

  • Symbole:

    • Schaltfläche "Weitere Tools " (Symbol ").
    • Anpassen und Steuern der Menüschaltfläche DevTools (Symbol anpassen).
    • Schaltfläche "Hilfe " (Symbol )".
    • Schließen DevTools-Schaltfläche (DevTools-Symbol schließen).

Die Aktivitätsleiste mit Bezeichnungen, die ihre Features kennzeichnen

Die Features der Aktivitätsleiste werden im Folgenden beschrieben.

Anheften und Neuanordnen 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 "), um alle verfügbaren Tools aufzulisten:

    Das Menü

  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 in der Aktivitätsleiste nicht genügend Platz vorhanden ist, um alle angehefteten Tools anzuzeigen, werden geöffnete, aber nicht angezeigte Tools in das Menü "Weitere Tools " verschoben:

Das Menü

Um ein Tool von 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:

Das Kontextmenü der Registerkarte des Leistungstools, um das Tool aus der Aktivitätsleiste zu entfernen

Inspect-Tool

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

Das Untersuchungstool, während Sie auf die erste Überschrift dieses Artikels zeigen

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 Geräteemulationstool 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

Siehe 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 es Ihnen, Ihren HTML- und CSS-Code zu untersuchen, zu bearbeiten und zu debuggen. Sie können im Tool bearbeiten, während die Änderungen live im Browser angezeigt werden.

Das Elementtool ist immer in der Aktivitätsleiste vorhanden.

Konsolentool

Im Konsolentool können Sie:

  • Anzeigen und Filtern von protokollierten 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 Tool "Quellen" an einem Haltepunkt angehalten wird.

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

Siehe Konsole.

Quellen-Tool

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

Das Tool "Quellen" ist immer in der Aktivitätsleiste 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.

Weitere Informationen finden Sie unter Überprüfen der Netzwerkaktivität.

Leistungstool

Siehe Analysieren der Laufzeitleistung (Lernprogramm).

Speichertool

Weitere Informationen finden Sie unter Beheben von Arbeitsspeicherproblemen.

Anwendungstool

Siehe 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 ").

Anpassen und Steuern des Menüs "DevTools"

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

  • Docken Sie DevTools an.
  • Docken Sie die Aktivitätsleiste an.
  • Wählen Sie ein Design aus.
  • Tastenkombinationen anzeigen.
  • Ändern der DevTools-Einstellungen.
  • Öffnen Sie die Geräteemulation.
  • Den Schnellansichtsbereich umschalten.
  • Führen Sie einen Befehl aus.
  • Nach Code suchen.
  • Öffnen einer Datei.

Hilfe-Schaltfläche

Die Schaltfläche Hilfe (Hilfesymbol) öffnet ein Dropdownmenü mit den folgenden Elementen:

DevTools-Schaltfläche 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 zum Anzeigen der aktuellen Webseite zu verwenden.

Features der Symbolleiste "Schnellansicht"

Verwenden Sie den Schnellansichtsbereich, 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 ein Tool aus der Aktivitätsleiste aus.

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

Öffnen Sie beispielsweise das Rendering-Tool im Bereich "Schnellansicht " unter dem Netzwerk-Tool , das in der Aktivitätsleiste geöffnet ist:

DevTools mit dem Netzwerktool oben und dem Renderingtool unten

Um die Schnellansicht auszublenden oder zu erweitern, klicken Sie auf "Schnellansicht reduzieren " (Symbol reduzieren) oder "Schnellansicht erweitern " (Symbol erweitern) oder drücken Sie die ESC-TASTE .

Alle Tools im Überblick

Eine Zusammenfassung der einzelnen Tools finden Sie unter Informationen zur Liste der Tools.

Tool, Registerkarte oder Bereich

Die Wörter "Tool", "Tabulator" und "Panel" sind in gewisser Weise austauschbar. Im Befehlsmenü werden die Werkzeuge als Panels bezeichnet; Das Elementwerkzeug heißt beispielsweise als Elementbedienfeld . Um zum Tool "Elemente" zu wechseln, klicken Sie auf die Registerkarte "Elemente ". Es gibt die Schaltfläche "Weitere Tools " (Symbol ") und eine Liste zum Auswählen von Tools. DevTools-Tools werden auch als DevTools-Panels bezeichnet.

Sie können jedes der Tools anpassen, und der Inhalt eines Tools kann sich je nach 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 über die Liste "Weitere Tools" auf der Symbolleiste "Schnellansicht" öffnen, wird das Tool im Bereich "Schnellansicht" geöffnet.

Aufgabe Schritte
Öffnen eines Tools in der Aktivitätsleiste oben in DevTools Klicken Sie in der Aktivitätsleiste oben in DevTools auf Weitere Tools (Symbol "), 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, sofern sie noch nicht angezeigt wird. Klicken Sie in der Symbolleiste "Schnellansicht " auf die Schaltfläche "Weitere Tools " (Symbol "), und wählen Sie dann ein Tool aus.
Verschieben eines Tools von der Symbolleiste "Schnellansicht " in 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 " Zur oberen Aktivitätsleiste wechseln" aus.
Verschieben eines Tools aus 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 " Schnellansicht nach unten verschieben" oder "Zur Seite verschieben" aus.
Ein Tool in seiner Standardsymbolleiste (Aktivitätsleiste oder Schnellansicht) öffnen 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 einen Befehl Tool anzeigen <> aus.

Neben den Tools für die Aktivitätsleiste und die Schnellansicht enthält DevTools die folgenden Tools:

Siehe auch

Power-Tipp: Verwenden Sie das Befehlsmenü

DevTools bietet viele Features und Funktionalitäten, die Sie mit Ihrer Website verwenden können. Sie können auf viele Arten auf die verschiedenen Teile von DevTools zugreifen, aber oft ist eine schnelle Möglichkeit die Verwendung des Befehlsmenüs.

das Befehlsmenü in DevTools

Im Befehlsmenü werden die Werkzeuge als "Panels" bezeichnet; Das Elementwerkzeug heißt beispielsweise als Elementbedienfeld . Um zum Tool "Elemente" zu wechseln, wählen Sie die Registerkarte "Elemente " aus.

  1. Führen Sie einen der folgenden Schritte 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 eingeben, um Features in DevTools anzuzeigen, auszublenden oder auszuführen.

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

    Das Befehlsmenü zeigt die Optionen an, nachdem Sie

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

    DevTools mit geöffnetem Tool

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

Weitere Informationen finden Sie unter Ausführen von Befehlen mit dem Microsoft Edge DevTools-Befehlsmenü.

Anpassen von DevTools

Sie können DevTools an Ihre Anforderungen an Ihre Arbeitsweise anpassen. Wenn Sie Einstellungen ändern möchten, klicken Sie 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 "Einstellungseinstellungen>" können Sie mehrere Teile von DevTools ändern. Beispielsweise können Sie die Spracheinstellung der Browser-Benutzeroberfläche verwenden, um dieselbe Sprache in DevTools zu verwenden, die in Ihrem Browser verwendet wird. Ein anderes Beispiel ist die Verwendung der 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 lokale Dateien zu einem Arbeitsbereich hinzu.
  • Filtern von Bibliothekscode mithilfe der Ignorierliste.
  • Definieren Sie die Geräte , die Sie in den Gerätesimulations- und Testmodus einbeziehen möchten. Weitere Informationen finden Sie unter Emulieren mobiler Geräte (Geräteemulation).
  • Wählen Sie ein Netzwerkeinschränkungsprofil aus.
  • Definieren Sie simulierte Standorte.
  • Passen Sie Tastenkombinationen an. Um beispielsweise in DevTools dieselben Tastenkombinationen wie in Visual Studio Code zu verwenden, wählen Sie Verknüpfungen aus voreingestelltem>Visual Studio Code anpassen aus.

Alle Tastenkombinationen und das Menü, um alle mit den Tastenkombinationen in Visual Studio Code abzugleichen

Testen experimenteller Features

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

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

Siehe auch:

Siehe auch

  • Zuletzt aktualisiert um