Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Dies sind die neuesten DevTools-Features in der stabilen Version von Microsoft Edge.
Ankündigungen des Microsoft Edge DevTools-Teams
Verwenden von DevTools im Windows-Modus für hohen Kontrast
Microsoft Edge DevTools wird nun im Modus für hohen Kontrast angezeigt, wenn sich Windows im Modus mit hohem Kontrast befindet.
Befolgen Sie die Anweisungen, um den Modus für hohen Kontrast in Windows zu aktivieren. Um DevTools in Microsoft Edge zu öffnen, drücken Sie F12 oder STRG+UMSCHALT+I. DevTools wird im Modus für hohen Kontrast angezeigt.
Hinweis: DevTools unterstützt derzeit den Modus mit hohem Kontrast unter Windows, aber nicht unter macOS.
Chromium Problem #1048378
Siehe auch:
Anpassen von Tastenkombinationen in DevTools an Visual Studio Code
Aus Ihrem Feedback und der öffentlichen Problemverfolgung von Chromium hat das Microsoft Edge DevTools-Team erfahren, dass Sie Tastenkombinationen in DevTools anpassen können möchten. In Microsoft Edge 84 können Sie jetzt Tastenkombinationen in DevTools mit Visual Studio Code abgleichen. Dies ist nur eines der Features, an denen das Team zur Anpassung der Tastenkombinationen arbeitet.
So testen Sie das Experiment:
Öffnen Sie in DevTools die Einstellungen , indem Sie ? drücken oder auf das Symbol Einstellungen (
)" in DevTools klicken.Aktivieren Sie im Abschnitt "Experimente" das Kontrollkästchen Registerkarte "Einstellungen für benutzerdefinierte Tastenkombinationen" aktivieren (Neuladen erforderlich).
DevTools neu laden.
Öffnen Sie die Einstellungen erneut, und wählen Sie den Abschnitt "Verknüpfungen" aus.
Klicken Sie auf die Dropdownliste Verknüpfungen aus Voreinstellung abgleichen , wählen Sie DevTools (Standard) und dann Visual Studio Code aus.
Die Tastenkombinationen in DevTools entsprechen nun den Tastenkombinationen für entsprechende Aktionen in Visual Studio Code.
Die Tastenkombination zum Anhalten oder Fortsetzen der Ausführung eines Skripts in Visual Studio Code ist beispielsweise F5. Bei der Voreinstellung DevTools (Standard) ist die gleiche Tastenkombination in DevTools F8, aber mit der Visual Studio Code-Voreinstellung ist diese Tastenkombination jetzt ebenfalls F5.
Das Feature ist derzeit in Microsoft Edge 84 als Experiment verfügbar, also teilen Sie bitte Ihr Feedback mit dem Team!
Chromium Problem #174309
Siehe auch:
Remotedebuggen von Surface Duo-Emulatoren
Sie können jetzt Ihre Webinhalte, die im Surface Duo-Emulator ausgeführt werden, remote debuggen, indem Sie die volle Leistung von Microsoft Edge DevTools verwenden.
Mit dem Surface Duo-Emulator können Sie testen, wie Ihre Webinhalte auf einer neuen Klasse von faltbaren und Dual-Screen-Geräten gerendert werden. Der Emulator läuft auf dem Android-Betriebssystem und stellt die Microsoft Edge Android-App bereit. Laden Sie Ihre Webinhalte in die Microsoft Edge-App, und debuggen Sie sie mit DevTools:
Die edge://inspect Seite in einer Desktop-instance von Microsoft Edge zeigt den SurfaceDuoEmulator mit einer Liste der geöffneten Registerkarten oder PWAs, die auf dem Surface Duo-Emulator ausgeführt werden:
Klicken Sie auf "Überprüfen ", um die Registerkarte oder PWA zu finden, die Sie debuggen möchten, um DevTools zu öffnen. Befolgen Sie die Schritt-für-Schritt-Anleitung zum Remotedebuggen Ihrer Webinhalte auf dem Surface Duo-Emulator: Remotedebuggen von Surface Duo-Emulatoren.
Einfacheres Ändern der Größe des DevTools-Schnellansichtbereichs
In Microsoft Edge 83 oder früher haben Sie die Größe der Schublade (jetzt Schnellansichtsbereich ) geändert, indem Sie den Mauszeiger in der Symbolleiste der Schublade bewegt haben. Die Schublade verhielt sich anders als die anderen Steuerelemente zum Ändern der Größe von Bereichen in DevTools, bei denen Sie auf den Rand des Bereichs zeigen, um die Größe zu ändern. Die folgende Abbildung zeigt, wie das Ändern der Größe der Schublade in Microsoft Edge Version 83 oder früher funktioniert hat:
Ab Microsoft Edge 84 können Sie die Größe der Schublade ändern, indem Sie mit dem Mauszeiger auf den Rand zeigen. Durch diese Änderung wird das Verhalten beim Ändern der Größe der Schublade an anderen Bereichen in DevTools ausgerichtet. Die folgende Abbildung zeigt, wie das Ändern der Größe der Schublade in Microsoft Edge 84 oder höher funktioniert:
Chromium Problem #1076112
Bildschirmübertragung: Navigationsschaltflächen, Anzeigefokus
Beim Remotedebuggen eines Android-Geräts, eines Geräts mit Windows 10 oder höher oder eines Surface Duo-Emulators können Sie die Screencastfunktion mit dem Symbol 
" in der oberen linken Ecke von DevTools umschalten. Wenn Screencasting aktiviert ist, können Sie in Microsoft Edge auf dem Remotegerät vom DevTools-Fenster aus auf der Registerkarte navigieren.
In Microsoft Edge 84 sind diese Navigationsschaltflächen jetzt auch über die Tastatur zugänglich. Wenn Sie beispielsweise UMSCHALT+TAB in der Leiste mit der übertragenen URL drücken, wird der Fokus auf die Schaltfläche "Aktualisieren " gelegt:
Chromium Problem #1081486
Auf den Detailbereich des Netzwerkbereichs kann jetzt zugegriffen werden
In Microsoft Edge 84 wird jetzt der Detailbereich im Netzwerktool in den Fokus gesetzt, wenn Sie es für eine Ressource im Netzwerkprotokoll öffnen. Mit dieser Änderung können Sprachausgaben den Inhalt des Detailbereichs vorlesen und mit ihm interagieren.
Chromium Problem #963183
Ankündigungen aus dem Chromium-Projekt
In den folgenden Abschnitten werden weitere in Microsoft Edge 84 verfügbare Features vorgestellt, die zum Open Source Chromium Projekt beigetragen haben.
Beheben von Websiteproblemen mit dem neuen Problemtool in der DevTools-Schublade
Das neue Problemtool in der Schublade (jetzt Schnellansichtsbereich ) unten in DevTools reduziert die Benachrichtigungsmüdigkeit und Unordnung in der Konsole. Derzeit ist die Konsole der zentrale Ort für Websiteentwickler, Bibliotheken, Frameworks und Microsoft Edge, um Meldungen, Warnungen und Fehler zu protokollieren. Das Probleme-Tool aggregiert Warnungen aus dem Browser auf strukturierte, aggregierte und umsetzbare Weise. Das Problemtool enthält Links zu betroffenen Ressourcen in DevTools und Anleitungen zum Beheben der Probleme.
Im Laufe der Zeit werden mehr Warnungen im Probleme-Tool statt in der Konsole angezeigt, um die Konsolenmeldungen zu optimieren.
Weitere Informationen finden Sie unter Suchen und Beheben von Problemen mit dem Problemtool.
Chromium Problem #1068116
Anzeigen von Informationen zur Barrierefreiheit in der QuickInfo "Überprüfungsmodus"
Die QuickInfo "Überprüfungsmodus" zeigt jetzt an, ob das Element über einen barrierefreien Namen und eine barrierefreie Rolle verfügt und über die Tastatur fokussiert werden kann.
Chromium Problem #1040025
Siehe auch:
- Analysieren von Seiten mit dem Tool "Überprüfen"
- Axe: Name Rollenwert - Informationen zu einem zugänglichen Namen und einer Rolle, auf webhint.io.
- Axe: Tastatur - über tastaturfokussierbar, bei webhint.io.
Aktualisierungen des Leistungsbereichs
Siehe auch:
Anzeigen der Informationen zur Gesamtblockierungszeit in der Fußzeile
Nach der Aufzeichnung deiner Ladeleistung zeigt das Leistungstool jetzt Informationen zur Gesamtblockierungszeit (TBT) in der Fußzeile an. TBT ist eine Metrik für die Ladeleistung, mit der quantifiziert werden kann, wie lange es dauert, bis eine Seite nutzbar ist. TBT misst im Wesentlichen, wie lange eine Seite nur brauchbar erscheint (weil der Inhalt auf dem Bildschirm gerendert wird); aber die Seite ist nicht wirklich nutzbar, da JavaScript den Hauptthread blockiert und die Seite daher nicht auf Benutzereingaben reagiert. TBT ist die Hauptmetrik zur Annäherung an die Verzögerung der ersten Eingabe.
Um Informationen zur Gesamtblockierungszeit zu erhalten, verwenden Sie nicht den Workflow " Seite
, um die Leistung des Seitenladevorgangs aufzuzeichnen.
Wählen Sie stattdessen 
aufzeichnen" aus, laden Sie die Seite manuell, warten Sie, bis die Seite geladen ist, und beenden Sie dann die Aufzeichnung.
Wenn Total Blocking Time: Unavailable angezeigt wird, hat Microsoft Edge DevTools die erforderlichen Informationen nicht aus den internen Profilerstellungsdaten in Microsoft Edge erhalten.
Chromium Problem #1054381
Siehe auch:
Layout-Schichtereignisse im neuen Abschnitt "Erfahrung"
Der neue Abschnitt "Erfahrung"des Leistungstools hilft Ihnen, Layoutänderungen zu erkennen. Die kumulative Layoutverschiebung (Cumulative Layout Shift, CLS) ist eine Kennzahl, mit der Sie unerwünschte visuelle Instabilität quantifizieren können.
Klicken Sie auf das Ereignis Layoutverschiebung , um die Details der Layoutänderung im Bereich "Zusammenfassung" anzuzeigen. Bewegen Sie den Mauszeiger über die Felder "Verschoben von " und " Verschoben nach ", um zu visualisieren, wo die Layoutänderung stattgefunden hat.
Siehe auch:
Genauere Zusagenterminologie in der Konsole
Beim Protokollieren eines Promisehat die Konsole fälschlicherweise PromiseStatus einen Wert angegeben, der auf festgelegt ist resolved.
Die Konsole verwendet jetzt den Begriff fulfilled, der mit der Promise Spezifikation übereinstimmt. Weitere Informationen zur Promise Spezifikation finden Sie unter States and Fates on GitHub.
V8 Ausgabe #6751
Siehe auch:
Updates des Formatvorlagenbereichs
Update Aug. 2026: Der Artikel "CSS-Schriftstile und -Einstellungen im Bereich "Formatvorlagen" und das dazugehörige Kontrollkästchen "Experiment" wurden entfernt.
Unterstützung für die rückgängig machen Schlüsselwort (keyword)
Die AutoVervollständigen-Benutzeroberfläche des Bereichs "Formatvorlagen" erkennt jetzt das CSS-Schlüsselwort (Schlüsselwort (Keyword), das den kaskadierten Wert einer Eigenschaft auf den vorherigen Wert rückgängig macht, der auf das Styling des Elements angewendet wurde.
Chromium Problem #1075437
Bildvorschau
Zeigen Sie im Bereich "Formatvorlagen" auf einen background-image Wert, um eine Vorschau des Bilds in einer QuickInfo anzuzeigen.
Chromium Problem #1040019
Die Farbauswahl verwendet jetzt die durch Leerzeichen getrennte funktionale Farbnotation.
CSS Color Module Level 4 gibt an, dass Farbfunktionen, z. B rgb(). , durch Leerzeichen getrennte Argumente unterstützen sollten.
rgb(0, 0, 0) entspricht beispielsweise rbg(0 0 0).
Wenn Sie Farben mit dem Farbwähler auswählen oder im Bereich "Formatvorlagen" zwischen Farbdarstellungen wechseln, indem Sie die UMSCHALTTASTE gedrückt halten und den Wert für die Hintergrundfarbe auswählen, wird die Syntax der durch Leerzeichen getrennten Argumente angezeigt.
Sie sollten die Syntax auch im Bereich "Berechnet" und in der QuickInfo "Modus überprüfen" anzeigen.
Microsoft Edge DevTools verwendet die neue Syntax, da kommende CSS-Features wie color() die veraltete Syntax mit durch Trennzeichen getrennten Argumenten nicht unterstützen.
Die Syntax mit durch Leerzeichen getrennten Argumenten wird in den meisten Browsern seit einiger Zeit unterstützt. Siehe Kann ich verwenden: Durch Leerzeichen getrennte funktionale Farbnotationen?
Chromium Problem #1072952
Ausmusterung des Bereichs "Eigenschaften" im Bedienfeld "Elemente"
Der Bereich "Eigenschaften" im Tool "Elemente" ist veraltet. Führen Sie stattdessen die Konsole ausconsole.dir($0).
Referenz
Unterstützung von App-Tastenkombinationen im Manifestbereich
Im Anwendungstool werden auf der Seite "Manifest " jetzt App-Verknüpfungen angezeigt. App-Verknüpfungen helfen Benutzern dabei, häufige oder empfohlene Aufgaben in einer Web-App schnell zu starten. Das Menü mit den App-Verknüpfungen wird nur für Progressive Web-Apps angezeigt, die auf dem Desktop oder Mobilgerät des Benutzers installiert sind.
Siehe auch:
Hinweis
Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Begriffen verwendet werden. Die Originalseite findet sich hier und wurde von Kayce Basques verfasst.
Diese Arbeit ist lizenziert unter einer Creative Commons Attribution 4.0 International License.