Übersicht über Microsoft Edge (Chromium)-EntwicklertoolsMicrosoft Edge (Chromium) Developer Tools overview

Wenn Sie Microsoft Edge installieren, erhalten Sie einen Browser.When you install Microsoft Edge, you get a browser. Außerdem erhalten Sie eine leistungsstarke Möglichkeit, Webprojekte zu überprüfen, zu debuggen und sogar zu erstellen.Also, you get a powerful way to inspect, debug, and even create web projects. Die im Browser ausgelieferten Entwicklertools basieren auf den Tools im Open-Source-Projekt Chromium, sodass Sie möglicherweise bereits mit den Tools vertraut sind.The Developer Tools shipped with the browser are based on the tools in the Chromium open-source project, so you may already be familiar with the tools. Um Beschreibungen in diesem Artikel kürzer zu halten, werden die jetzt Microsoft Edge Developer Tools als DevTools bezeichnet.To keep descriptions shorter in this article, the Microsoft Edge Developer Tools are now referred to as DevTools .

Verwenden Sie DevTools, um die folgenden Entwicklungsaufgaben zu überprüfen und weitere Informationen zu erhalten.Use DevTools to review and learn more about the following development tasks.

Und vieles mehr.And a lot more. Alles beginnt, wenn Sie DevTools öffnen und jedes Tool an Ihre Anforderungen anpassen.It all starts when you open DevTools and customize each tool to your needs.

Entwicklungstools öffnenOpen the DevTools

Verwenden Sie eine der folgenden Aktionen, um devTools zu öffnen und zu erkunden.To open and explore the DevTools, use one any of the following actions.

  • Zeigen Sie auf ein beliebiges Element auf der Webseite, öffnen Sie das Kontextmenü (klicken Sie mit der rechten Maustaste auf), und wählen Sie dann Überprüfen aus.Hover on any element on the webpage, open the contextual menu (right-click), and then choose Inspect. Mit dieser Aktion wird das Elementtool geöffnet.This action opens the Elements tool.
  • Wählen Sie F12 aus.Select F12.
  • Wählen Ctrl + Shift + I Sie unter Windows/Linux oder Command + Option + I unter macOS aus.Select Ctrl+Shift+I on Windows/Linux or Command+Option+I on macOS.

Es gibt zwei Möglichkeiten, mit devTools zu interagieren.There are two main ways to interact with the DevTools.

  • Verwenden der MausUse the mouse
  • Tastenkombinationen.Keyboard shortcuts. Tastenkombinationen bieten eine schnelle Möglichkeit zum Zugriff auf Funktionen und sind für die Barrierefreiheit erforderlich.Keyboard shortcuts provide a quick way to access functionality and are needed for accessibility. Das Microsoft Edge DevTools-Team arbeitet hart daran, alle Tools mithilfe der Tastatur und Hilfstechnologien wie Bildschirmleseprogramme verfügbar zu machen.The Microsoft Edge DevTools team works hard to make all the tools available using the keyboard and assistive technologies such as screen readers. Weitere Informationen zum Öffnen der verschiedenen Features in den DevTools finden Sie unter Microsoft Edge DevTools-Tastenkombinationen.For more information about how to open the different features in the DevTools, navigate to Microsoft Edge DevTools keyboard shortcuts.

Docken der DevTools in Ihrem BrowserDock the DevTools in your browser

Wenn Sie devTools öffnen, dockt es links vom Browser an.When you open the DevTools, it docks to the left of your browser. Führen Sie die folgenden Aktionen aus, um den angedockten Speicherort der DevTools zu ändern.To change the docked location of the DevTools, complete the following actions.

  1. Klicken Sie auf die Schaltfläche DevTools ( ) anpassen und ... steuern.Choose the Customize And Control DevTools (...) button.
  2. Wählen Sie rechts neben Platzierung der DevTools relativ zur Seite (Dock-Seite) eine Dock-Seite-Option aus.To the right of Placement of the DevTools relative to the page (Dock side), choose a Dock side option.

Weitere Informationen finden Sie unter Ändern der Microsoft Edge DevTools-Platzierung (Abdocken, Dock nach unten, Dock nach links).For more information, navigate to Change Microsoft Edge DevTools placement (Undock, Dock To Bottom, Dock To Left).

Screenshot des dockseitigen Menüs in DevTools

Wählen Sie aufDockseite eine der folgenden Layoutoptionen aus.In Dock side, choose any of the following layout options.

  • Abdocken in separates Fenster.Undock into separate window. Hilft Ihnen bei der Arbeit mit mehreren Monitoren oder bei der Arbeit an einer Vollbild-App.Helps you work with several monitors or if you need to work on a full screen app.
  • Dock nach links oder Dock nach rechts.Dock to left or Dock to right. Hilft Ihnen, die DevTools seite an Seite mit Ihrem Webprodukt zu halten, und ist hervorragend, wenn Sie mobile Geräte emulieren.Helps you keep the DevTools side by side with your web product, and is excellent when you emulate mobile devices. Die Optionen Dock nach links und Dock nach rechts funktionieren am besten mit hochauflösenden Displays.The Dock to left and Dock to right options work best with high-resolution displays. Weitere Informationen zu Emulationsgeräten finden Sie unter Emulieren mobiler Geräte in Microsoft Edge DevTools.For more information about emulation devices, navigate to Emulate mobile devices in Microsoft Edge DevTools.
  • Dock nach unten.Dock to bottom. Hilft Ihnen, wenn Nicht genügend horizontaler Anzeigebereich verfügbar ist oder Sie langen Text im DOM oder in der Konsole debuggen möchten.Helps you when you do not have enough horizontal display space, or you want to debug long text in the DOM or Console.

Erfahren Sie mehr über die wichtigsten ToolsLearn about the core tools

DevTools bieten Ihnen eine verblüffende Leistung, um das derzeit im Browser angezeigte Webprodukt zu überprüfen, zu debuggen und zu ändern.DevTools give you an amazing amount of power to inspect, debug, and change the web product currently displayed in the browser. Die meisten Tools zeigen die Änderungen live an.Most of the tools display the changes live. Liveupdates machen die Tools unglaublich nützlich, um die Darstellung und Navigation oder Funktionalität eines Webprojekts zu verfeinern, ohne es aktualisieren oder erstellen zu müssen.Live updates make the tools incredibly useful to refine the appearance and navigation or functionality of a web project without the need to refresh or build it. Mit den DevTools können Sie auch webbasierte Drittanbieterprodukte auf Ihrem Computer ändern.The DevTools also allow you to change web-based third-party products on your computer.

DevTools ist über einen Zeitraum von mehreren Jahren gewachsen.DevTools grew over a period of several years. Sie können davon ausgehen, dass DevTools schwierig zu erlernen sind, wenn Sie eines der Tools zum ersten Mal öffnen.You may assume that DevTools are difficult to learn when you first open any of tools. Im folgenden Text werden schnell die verschiedenen Teile präsentiert.The following text quickly introduces the different parts. Die Hauptsymbolleiste bietet ihnen einige Abschnitte, und die Abschnitte werden von links nach rechts geordnet.The main toolbar offers you a few sections and the sections are ordered from left to right.

Screenshot der Menüleiste der DevTools mit Bezeichnungen, die die verschiedenen Abschnitte erläutern.  In order: Inspect Tool, Device Emulation tool, Tools tab group, JavaScript errors, Issues, Settings, Feedback, Customize, and Close.

  • Mit dem Inspect-Tool können Sie ein Element auf der aktuellen Webseite auswählen.The Inspect Tool allows you to choose an element on the current webpage. Nachdem Sie es aktiviert haben, können Sie die Maus über verschiedene Teile der Webseite bewegen, um detaillierte Informationen zum Element und eine Farbüberlagerung zu erhalten, um Dimensionen, Abstand und Rand anzuzeigen.After you activate it, you may move your mouse over different parts of the webpage to get detailed information about the element and a color overlay to display dimensions, padding, and margin.

    Screenshot des Überprüfungstools mit der ersten Ausgewählten Überschrift dieses Artikels

  • Das Tool Geräteemulation zeigt das aktuelle Webprodukt in einem emulierten Gerätemodus an.The Device Emulation tool displays the current web product in an emulated device mode. Mit dem Tool Geräteemulation können Sie ausführen und testen, wie Ihr Produkt reagiert, wenn Sie die Größe des Browsers ändern.The Device Emulation tool allows you to run and test how your product reacts when you resize the browser. Außerdem erhalten Sie eine Schätzung des Layouts und Verhaltens auf einem mobilen Gerät.It also gives you an estimation of the layout and behavior on a mobile device.

    Screenshot der DevTools-Anzeige dieses Artikels in einem emulierten Mobiltelefon

  • Die Registerkartengruppe Extras ist eine Gruppe von Registerkarten, die unterschiedliche Tools darstellen, die in verschiedenen Szenarien verwendet werden.The Tools tab group is a group of tabs that represent different tools that are used in different scenarios. Sie können jedes der Tools anpassen, und jedes Tool kann sich je nach Kontext ändern.You may customize each of the tools and each tool may change based on the context. Um ein Dropdownmenü mit weiteren Tools zu öffnen, wählen Sie die Schaltfläche Weitere Registerkarten ( >> ) aus.To open a dropdown menu of more tools, choose the More tabs (>>) button. Jedes der Tools wird später im folgenden Abschnitt eingeführt.Each of the tools is introduced later in the following section.

  • Neben der Registerkartengruppe Extras befinden sich optionale Fehler- und Problemverknüpfungen.Next to the Tools tab group are optional error and issues shortcuts. Die Verknüpfungen werden angezeigt, wenn JavaScript-Fehler oder -Probleme auf der aktuellen Webseite auftreten.The shortcuts display when JavaScript errors or issues occur on the current webpage. Die Schaltfläche Konsole öffnen zum Anzeigen von # Fehlern, # Warnungen (JavaScript-Fehler) zeigt einen roten Kreis an, gefolgt von der Anzahl der X JavaScript-Fehler.The Open Console to view # errors, # warnings (JavaScript Errors) button displays a red circle with an X followed by the number of JavaScript errors. Um die Konsole zu öffnen und mehr über den Fehler zu erfahren, wählen Sie die Schaltfläche JavaScript-Fehler aus.To open the Console and learn about the error, choose the JavaScript Errors button. Die Schaltfläche Probleme öffnen zum Anzeigen # Probleme (Probleme) ist ein blaues Meldungssymbol gefolgt von der Anzahl der Probleme.The Open Issues to view # issues (Issues) button is a blue message icon followed by the number of issues. Wählen Sie zum Öffnen des Tools Probleme die Schaltfläche Probleme aus.To open the Issues tool, choose Issues button.

  • Auf der Schaltfläche Einstellungen wird ein Zahnradsymbol angezeigt.The Settings button displays a gear icon. Klicken Sie zum Öffnen der Webseite DevTools-Einstellungen auf die Schaltfläche Einstellungen.To open DevTools Settings webpage, choose the Settings button. Auf der Webseite Einstellungen wird ein Menü angezeigt, um Einstellungen zu ändern, Experimenteund vieles mehr zu ändern.The Settings webpage displays a menu to change Preferences, turn on Experiments, and much more.

  • Die Schaltfläche Feedback senden zeigt den Torso mit einer Chatblase daneben an.The Send Feedback button displays torso with a chat bubble next to it. Um das Dialogfeld Feedback senden zu öffnen, wählen Sie die Schaltfläche Feedback senden aus.To open the Send Feedback dialog, choose the Send Feedback button. Im Dialogfeld Feedback senden können Sie Informationen eingeben, um zu beschreiben, was passiert ist, und enthält automatisch einen Screenshot.The Send Feedback dialog allows you to enter information to describe what happened and automatically includes a screenshot. Verwenden Sie es, um eine Verbindung mit dem DevTools-Team herzustellen, um Probleme, Probleme oder Vorschläge zu melden.Use it to connect with the DevTools team to report problems, issues, or suggest ideas.

  • Die Schaltfläche Devtools ( ) anpassen und steuern ... öffnet ein Dropdownmenü.The Customize and control Devtools (...) button opens a dropdown menu. Sie können definieren, wo Sie devTools andocken, suchen, verschiedene Tools öffnen und vieles mehr.It allows you to define where to dock the DevTools, search, open different tools, and much more.

In der Registerkartengruppe Extras können Sie die verschiedenen Tools öffnen, die in devTools verfügbar sind.In the Tools tab group, you may open the different tools that are available in the DevTools. In der folgenden Liste werden die am häufigsten verwendeten Tools in devTools beschrieben.The following list describes the most commonly used tools in the DevTools.

  • Willkommen.Welcome. Enthält Informationen zu den neuen Features von DevTools, zur Kontaktaufnahme mit dem Team und bietet Informationen zu bestimmten Features.Includes information about the new features of DevTools, how to contact the team, and provides information about certain features.
  • Elemente.Elements. Ermöglicht das Bearbeiten oder Überprüfen von HTML und CSS.Allows you to edit or inspect HTML and CSS. Sie können sowohl im Tool bearbeiten als auch die Änderungen live im Browser anzeigen.You may edit both in the tool and display the changes live in the browser.
  • Konsole.Console. Ermöglicht das Anzeigen und Filtern von Protokollmeldungen.Allows you to display and filter log messages. Protokollmeldungen sind automatisierte Protokolle des Browsers wie Netzwerkanforderungen und vom Entwickler generierte Protokolle.Log messages are automated logs of the browser like network requests and developer-generated logs. Sie können JavaScript auch direkt in der Konsole im Kontext des aktuellen Fensters oder Frames ausführen.You may also run JavaScript directly in the Console in the context of the current window or frame.
  • Quellen.Sources. Ein Codeeditor und ein JavaScript-Debugger.A code editor and JavaScript debugger. Sie können Projekte bearbeiten, Codeausschnitte verwalten und Ihr aktuelles Projekt debuggen.You may edit projects, maintain snippets, and debug your current project.
  • Netzwerk.Network. Ermöglicht ihnen das Überwachen und Überprüfen von Anforderungen oder Antworten aus dem Netzwerk- und Browsercache.Allows you to monitor and inspect requests or responses from the network and browser cache. Sie können Anforderungen und Antworten nach Ihren Anforderungen filtern und unterschiedliche Netzwerkbedingungen simulieren.You may filter requests and responses to fit your needs and simulate different network conditions. Weitere spezielle Tools sind ebenfalls verfügbar, z. B. Performance, Memory, Application, Securityund Audits.Other specialized tools are also available, such as Performance, Memory, Application, Security, and Audits.

Power tip: Verwenden des BefehlsmenüsPower tip: Use the command menu

Die DevTools bieten zahlreiche Features und Funktionen, die Sie mit Ihrem Webprodukt verwenden können.The DevTools provides lots of features and functionality to use with your web product. Der Zugriff auf die verschiedenen Teile der DevTools ist auf unterschiedliche Weise, aber die schnellste Möglichkeit, auf die benötigten Features zu zugreifen, ist die Verwendung des Befehlsmenüs.Access the different parts of the DevTools in many ways, but the fastest way to access the features you need is to use the command menu. Weitere Informationen finden Sie unter Ausführen von Befehlen mit dem Menü Microsoft Edge DevTools Command.For more information, navigate to Run commands with the Microsoft Edge DevTools Command menu. Führen Sie eine der folgenden Aktionen aus, um das Befehlsmenü zu öffnen.To open the command menu, complete one of the following actions.

  • Wählen Control + Shift + P Sie (Windows, Linux) oder Command + Shift + P (macOS) aus.Select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS).
  • Wählen Sie Anpassen und Steuern devTools ( ... ), und wählen Sie dann Ausführen Befehl aus.Choose Customize And Control DevTools (...), and then choose Run Command.

Screenshot des Befehlsmenüs in DevTools

Im Befehlsmenü können Sie Befehle zum Anzeigen, Ausblenden oder Ausführen von Features in devTools eingeben.The command menu allows you to type commands to display, hide, or run features in the DevTools. Wenn das Befehlsmenü geöffnet ist, geben Sie das Wort Änderungen ein, und wählen Sie dann Drawer Show Changes aus.With the command menu open, enter the word changes, and then choose Drawer Show Changes. Das Tool Änderungen wird geöffnet, das beim Bearbeiten von CSS hilfreich ist, aber in der DevTools-Benutzeroberfläche schwer zu finden ist.The Changes tool opens which is useful when you edit CSS, but is difficult to find in the DevTools UI.

Anpassen der DevToolsCustomize the DevTools

DevTools können an Ihre Anforderungen oder die Art und Weise angepasst werden, wie Sie arbeiten.DevTools are customizable to meet your needs or the way you work. Führen Sie zum Ändern der Einstellungen eine der folgenden Aktionen aus.To change settings, complete one of the following actions.

  • Wählen Sie Einstellungen (Das Zahnradsymbol oben rechts)Choose Settings (the gear icon on the top right)
  • Auswählen F1 oder ? .Select F1 or ?.

Im Abschnitt Einstellungen können Sie mehrere Teile der DevTools ändern.In the Preferences section, you may change several parts of the DevTools. Sie können z. **** B. die Einstellung Browsersprache übereinstimmen verwenden, um dieselbe Sprache in den DevTools zu verwenden, die in Ihrem Browser verwendet wird.For example, you may use the Match the browser language setting to use the same language in the DevTools that is use in your browser. Verwenden Sie in einem anderen Beispiel die Einstellung Design, um das Design der DevTools zu ändern.For another example, use the Theme setting to change the theme of the DevTools.

Screenshot aller Einstellungen in DevTools

Sie können auch die Einstellungen erweiterter Features ändern, einschließlich der folgenden Features.You may also change the settings of advanced features including the following features.

Testen experimenteller FeaturesTry experimental features

Das DevTools-Team stellt neue Features als Experimente in den DevTools zur Verfügung.The DevTools team provides new features as experiments in the DevTools. Um die vollständige Liste der Experimente zu erhalten, navigieren Sie zu den DevTools-Einstellungen, und wählen Sie dann Experimente aus.To get the full list of experiments, navigate to the DevTools Settings, and then choose Experiments. Sie können die einzelnen Experimente aktivieren oder deaktivieren.You may turn each of the experiments on or off. Helfen Sie bei der Entscheidung, welches der Experimente für Sie wertvoll ist.Help decide which one of the experiments is valuable to you. Weitere Informationen zu den Experimenten finden Sie unter Experimental-Features.For more information on the experiments, navigate to Experimental features.

Mit dem Microsoft Edge-Entwicklungstools-Team Kontakt aufnehmenGetting in touch with the Microsoft Edge DevTools team

Verwenden Sie die folgenden Optionen, um die neuen Features und Änderungen im Beitrag, oder andere Themen, die mit Entwicklungstools zu tun hat, zu diskutieren.Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Senden Sie Ihr Feedback über das Symbol Feedback senden, oder wählen Sie Alt+Shift+I (Windows, Linux) oder Option+Shift+I (macOS) in Entwicklungstools aus.Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet auf @EdgeDevTools.Tweet at @EdgeDevTools.
  • Senden Sie einen Vorschlag an The Web We Want.Submit a suggestion to The Web We Want.
  • Verwenden Sie den folgenden Feedback-Abschnitt, um Fehler in diesem Artikel zu melden.To file bugs about this article, use the following Feedback section.

Das Symbol „Feedback senden“ in den Microsoft Edge-Entwicklungstools

Wenn Sie eine Vorschau der neusten Features für die Entwicklungstools anzeigen möchten, laden Sie Microsoft Edge Canary mit nächtlichen Builds herunter.If you want to preview the latest features coming to the DevTools, download Microsoft Edge Canary, which builds nightly.

Weitere InformationenSee also