Neuerungen in DevTools (Microsoft Edge 91)

Lesen Sie diese Ankündigungen, um sich die neuesten Features von Microsoft Edge DevTools und der Microsoft Edge DevTools-Erweiterung für Microsoft Visual Studio Code und Visual Studio zu ansehen.

Um auf dem neuesten Stand zu bleiben und die neuesten DevTools-Features zu erhalten, laden Sie eine Insiders-Vorschauversion von Microsoft Edge herunter. Unabhängig davon, ob Sie Windows, Linux oder macOS verwenden, sollten Sie Canary (oder einen anderen Vorschaukanal) als Standardentwicklungsbrowser verwenden. Die Beta-, Dev- und Canary-Versionen von Microsoft Edge werden als separate Apps parallel zur stabilen, veröffentlichten Version von Microsoft Edge ausgeführt. Weitere Informationen finden Sie unter Microsoft Edge Insider Channels.

Die neuesten Ankündigungen finden Sie unter Dem Microsoft Edge-Team auf Twitter. Um ein Problem mit DevTools zu melden oder nach einem neuen Feature zu fragen, melden Sie ein Problem im MicrosoftEdge/DevTools-Repository .

Wellenförmige Unterstreichungen heben Codeprobleme und Verbesserungen im Elementtool hervor

In den meisten modernen IDEs weisen wellenförmige Unterstreichungen unter Text auf Syntaxfehler hin. In Microsoft Edge Version 91 oder höher werden wellenförmige Unterstreichungen unter HTML in der DOM-Ansicht des Elements-Tools angezeigt. Die wellenförmigen Unterstreichungen weisen auf Codeprobleme und Vorschläge im Zusammenhang mit Barrierefreiheit, Kompatibilität, Leistung usw. hin.

So öffnen Sie das Tool "Probleme" und erfahren mehr über das Problem und dessen Behebung:

• Halten Sie die UMSCHALTTASTE gedrückt, und klicken Sie dann auf eine wellenförmige Unterstreichung.

• Oder klicken Sie mit der rechten Maustaste auf eine wellenförmige Unterstreichung, und wählen Sie dann In Problemen anzeigen aus.

Auswählen des unterstrichenen Fehlers im Tool Elemente :

Anzeigen von Fehlerdetails im Problemtool :

Siehe auch:

• Suchen und Beheben von Problemen mit dem Tool "Probleme"

Informationen zu DevTools mit informativen QuickInfos

Die DevTools-QuickInfos-Funktion hilft Ihnen, mehr über die verschiedenen Tools und Bereiche zu erfahren. Zeigen Sie auf die einzelnen beschriebenen Regionen von DevTools, um mehr über die Verwendung des Tools zu erfahren. Führen Sie eine der folgenden Aktionen aus, um QuickInfos zu aktivieren:

• Wählen Sie DevTools anpassen und steuern (...) >Hilfe>Umschalten der DevTools-QuickInfos aus.
• Drücken Sie STRG+UMSCHALT+H (Windows, Linux) oder BEFEHL+UMSCHALT+H (macOS).
• Öffnen Sie das Befehlsmenü , und geben Sie dann QuickInfos ein.

Bewegen Sie dann den Mauszeiger auf jeden umrissenen Bereich von DevTools:

Um QuickInfos zu deaktivieren, drücken Sie ESC.

Update: Dieses Feature wurde veröffentlicht und ist nicht mehr experimentell.

Hinweis: Ab Mai 2022 werden QuickInfos von der Aktivitätsleiste nicht mehr unterstützt.

service worker update Zeitleiste

Wenn Sie ein Progressive Web App- oder Service Worker-Entwickler sind, zeigen Sie in Microsoft Edge Version 91 oder höher den Updatelebenszyklus Ihrer Service Worker als Zeitleiste im Anwendungstool an. Dieses Feature hilft Ihnen, die Zeit zu verstehen, die Ihr Service Worker in jeder der folgenden Phasen verbringt:

• Installation
• Wait
• Activate

Informationen zu Echtzeitupdates zu diesem Feature im Chromium Open-Source-Projekt finden Sie unter Problem 1066604.

Siehe auch:

• Der Service Worker-Lebenszyklus.
• Verbesserungen an Service Worker: DevTools-Debugtools für progressive Web-Apps und Service Worker.

Progressive Web-Apps keine Warnungen mehr für nicht quadratische Symbole anzeigen

Wenn in Microsoft Edge Version 90 oder früher das Web-App-Manifest Ihrer PWA ein nicht quadratisches Symbol enthielt, wurde im Abschnitt Fehler und Warnungen für jedes nicht quadratische Symbol eine Warnung angezeigt. In Microsoft Edge Version 91 oder höher zeigt der Abschnitt Manifest im Anwendungstool keine Warnungen an, wenn Sie mindestens ein quadratisches Symbol angeben. Wenn Sie keine quadratischen Symbole angeben, wird die folgende Warnmeldung angezeigt:

Most operating systems require square icons.  Please include at least one square icon in the array.

In Microsoft Edge Version 90 oder früher wird für jedes Nicht-Quadrat-Symbol ein Fehler angezeigt:

In Microsoft Edge Version 91 oder höher wird kein Fehler angezeigt, wenn Sie mindestens ein quadratisches Symbol angeben:

Um Fehler und Warnungen in Ihrem Web-App-Manifest anzuzeigen, wählen Sie Anwendungstool>Abschnitt>Manifest aus. Fehler und Warnungen werden unter der Überschrift Fehler und Warnungen aufgeführt.

Informationen zu Echtzeitupdates zu diesem Feature im Chromium Open-Source-Projekt finden Sie unter Problem 1185945.

Siehe auch:

• Verwenden des Web-App-Manifests zum Integrieren Ihrer progressiven Web-App in das Betriebssystem
• PWABuilder: Image Generator : Erstellt App-Symbole für verschiedene Plattformen, die in Ihr Web-App-Manifest aufgenommen werden sollen.

Lokalisierte DevTools werden jetzt in Chromium-basierten Browsern unterstützt

Ab Microsoft Edge Version 81 wird die Microsoft Edge DevTools-Benutzeroberfläche in Ihrer eigenen Sprache angezeigt. Viele Entwickler verwenden Entwicklertools wie StackOverflow und Visual Studio Code in ihrer Muttersprache. Um eine ähnliche Flexibilität der Benutzeroberflächensprache zu bieten, haben das Microsoft Edge DevTools-Team, das Chrome DevTools-Team und das Google Lighthouse-Team zusammengearbeitet, um die gleiche Erfahrung in allen Chromium-basierten Browsern bereitzustellen.

Weitere Informationen finden Sie unter Ändern der DevTools-Spracheinstellungen.

Weitere Informationen zur Zusammenarbeit an diesem Feature im Chromium Open-Source-Projekt finden Sie unter Problem 1136655.

Verwenden der Tastatur zum Navigieren zu CSS-Variablen

Ab Microsoft Edge Version 88 werden im Bereich Formatvorlagen CSS-Variablen angezeigt und ein Link direkt zur Definition der einzelnen Variablen bereitgestellt. In Microsoft Edge Version 91 oder höher können Sie die Pfeiltasten verwenden, um ganz einfach zu CSS-Variablen zu navigieren. Um die Definition im Bereich Formatvorlagen zu öffnen, zeigen Sie auf eine Variable, und drücken Sie dann die EINGABETASTE:

Echtzeitupdates zu diesem Feature im Chromium Open-Source-Projekt finden Sie unter Problem 1187735.

Siehe auch:

• Verwenden von benutzerdefinierten CSS-Eigenschaften (Variablen)
• Referenz zu CSS-Features

Probleme werden automatisch nach Schweregrad sortiert.

Das Tool Probleme zeigt Empfehlungen zur Verbesserung Ihrer Website an, einschließlich Barrierefreiheit, Leistung, Sicherheit usw. Basierend auf Benutzerfeedback werden Probleme jetzt automatisch nach Schweregrad sortiert. In jeder Feedbackkategorie wird jedes Problem, das als Fehler gekennzeichnet ist, zuerst angezeigt, gefolgt von jedem Issue, das als Warnung gekennzeichnet ist, und dann jedes Problem, das als Tipp gekennzeichnet ist:

Siehe auch:

• Suchen und Beheben von Problemen mit dem Tool "Probleme"

Microsoft Edge Developer Tools für Visual Studio Code, Version 1.1.7

Die Microsoft Edge Tools für Visual Studio Code-Erweiterungsversion 1.1.7 stellt die DevTools von Microsoft Edge Version 88 bereit. Diese Erweiterung unterstützt jetzt ARM-Geräte und ist nicht mehr von der Debugger für Microsoft Edge-Erweiterung abhängig.

Version 1.1.7 enthält die folgenden Fehlerbehebungen und Verbesserungen:

• Die Zuverlässigkeit des Zielabschlusses wurde aktualisiert.

• Der Seitenbereich wurde so aktualisiert, dass er automatisch aktualisiert wird, wenn Sie Ziele debuggen, die erstellt oder zerstört werden.

• Ein neues Kontextmenü wurde hinzugefügt, mit dem Sie schneller auf die Erweiterungseinstellungen und das neueste Änderungsprotokoll zugreifen können.

• Die Veröffentlichung der Erweiterungsdokumentation einschließlich der neuesten Features wurde aktualisiert und vereinfacht.

Informationen zum manuellen Update auf Version 1.1.7 finden Sie unter Manuelles Aktualisieren einer Erweiterung. Sie können Im GitHub-Repository vscode-edge-devtools Probleme melden und zur Erweiterung beitragen.

Siehe auch:

• Microsoft Edge DevTools-Erweiterung für Visual Studio Code

Ankündigungen aus dem Chromium-Projekt

In den folgenden Abschnitten werden zusätzliche Features angekündigt, die in Microsoft Edge verfügbar sind und zum Open-Source-Chromium-Projekt beigetragen wurden.

Visualisieren des CSS-Bildlaufs

Im Tool Elemente können Sie jetzt das Signal umschalten, um die scroll-snap Ausrichtung des CSS-Bildlaufs zu überprüfen. Wenn ein HTML-Element auf Ihrer Webseite darauf angewendet wurdescroll-snap-type, wird daneben im Tool Elemente ein scroll-snap Badge angezeigt. Klicken Sie auf das scroll-snap Signal, um ein Bildlauf-Andock-Overlay auf der Webseite anzuzeigen.

Eine Beispielwebseite finden Sie unter Scroll Snap Demo. Im Beispiel werden Punkte an ausrichtungskanten Angezeigt. Der Bildlaufport weist eine durchgezogene Kontur auf, während die Andockelemente gestrichelte Konturen aufweisen. Der Bildlaufabstand ist grün ausgefüllt, während der Bildlaufrand orange ausgefüllt ist:

Informationen zum Verlauf dieses Features im Chromium Open-Source-Projekt finden Sie unter Problem 862450.

Siehe auch:

• Untersuchen des CSS-Rasters
• Referenz zu CSS-Features

Neues Speicherprüfungstool

Verwenden Sie das neue Speicherprüfungstool , um einen ArrayBuffer im JavaScript- und Wasm-Speicher zu überprüfen:

Siehe:

• Untersuchen eines JavaScript-Arraybuffers mit dem Speicherprüfungstool
• Debuggen von JavaScript-Code mithilfe des Debuggerbereichs

Informationen zum Verlauf dieses Features im Chromium Open-Source-Projekt finden Sie unter Problem 1166577.

Bereich "Neue Badge-Einstellungen" im Tool "Elemente"

Verwenden Sie nun die Badge-Einstellungen im Tool Elemente , um einzelne Badges zu aktivieren (oder zu deaktivieren). Verwenden Sie dieses Feature, um wichtige Badges anzupassen und den Fokus zu behalten, während Sie Webseiten überprüfen.

1. Klicken Sie mit der rechten Maustaste auf ein Element, und klicken Sie dann auf Badgeeinstellungen. Der Bereich badge-Einstellungen wird oben im Tool Elemente geöffnet:

   

2. Aktivieren (oder deaktivieren) Sie das Kontrollkästchen neben dem Badgenamen, um die Badges anzuzeigen (oder auszublenden).

Siehe auch:

• Untersuchen, Bearbeiten und Debuggen von HTML und CSS mit dem Elementtool

Erweiterte Bildvorschau mit Informationen zum Seitenverhältnis

Im Tool Elemente wurden die Bildvorschauen verbessert, um weitere Informationen anzuzeigen, einschließlich der folgenden Details:

• Gerenderte Größe
• Gerendertes Seitenverhältnis
• Systeminterne Größe
• Intrinsisches Seitenverhältnis
• Dateigröße

Diese Informationen helfen Ihnen, Ihre Bilder besser zu verstehen und Optimierungen anzuwenden. Die Informationen zum Bildseitenverhältnis sind auch im Netzwerktool verfügbar, wenn Sie auf eine Seitenressource klicken, die ein Bild ist:

Informationen zum Verlauf dieses Features im Chromium Open-Source-Projekt finden Sie unter Probleme 1149832 und 1170656.

Siehe auch:

• Untersuchen, Bearbeiten und Debuggen von HTML und CSS mit dem Elementtool
• Untersuchen der Netzwerkaktivität

Neue Optionen zum Konfigurieren von Content-Encodings im Tool für Netzwerkbedingungen

Klicken Sie im Netzwerktool auf die neue Schaltfläche Weitere Netzwerkbedingungen... neben dem Dropdownmenü Drosselung , um das Tool Netzwerkbedingungen zu öffnen. So testen Sie, ob Serverantworten für Browser ordnungsgemäß codiert sind, die gzip, brotli oder eine andere Zukünftige Content-Encodingnicht unterstützen:

1. Öffnen Sie das Tool Netzwerkbedingungen .

2. Wechseln Sie zu Akzeptierte Inhaltscodierungen.

3. Deaktivieren Sie das Kontrollkästchen neben dem , das Content-Encoding Sie testen möchten.

Siehe auch:

• Tool für Netzwerkbedingungen

Informationen zum Verlauf dieses Features im Chromium Open-Source-Projekt finden Sie unter Problem 1162042.

Bereichserweiterungen für Formatvorlagen

Neue Verknüpfung zum Anzeigen des berechneten Werts im Bereich Formatvorlagen

Um nun den berechneten CSS-Wert auf der Registerkarte Formatvorlagen im Tool Elemente anzuzeigen:

1. Klicken Sie mit der rechten Maustaste auf eine CSS-Eigenschaft, und wählen Sie dann Berechneten Wert anzeigen aus:

   

Siehe auch:

• Zeigen Sie nur die CSS-Datei an, die tatsächlich auf ein Element imVerweis auf CSS-Features angewendet wird.
• Zeigen Sie den Bereich Berechnete Randleiste im Bereich Formatvorlagen unter Neuerungen in DevTools (Microsoft Edge 87) an.
• Erkunden Sie alle berechneten Stile in Navigate DevTools mit Hilfstechnologie.

Informationen zum Anzeigen des Verlaufs dieses Features im Chromium Open-Source-Projekt finden Sie unter Problem 1076198.

Unterstützung für die Akzentfarben-Schlüsselwort (keyword)

Die AutoVervollständigen-Benutzeroberfläche des Bereichs Formatvorlagen erkennt jetzt die accent-color CSS-Schlüsselwort (keyword), mit der Sie die Akzentfarbe für vom -Element generierte UI-Steuerelemente angeben können. Beispiele für Benutzeroberflächensteuerelemente, die von einem Element generiert werden, sind Kontrollkästchen oder Optionsfelder.

Weitere Informationen zu den status der Chromium-Implementierung finden Sie unter Feature: Css-Eigenschaft für Akzentfarbe. Um dieses Feature zu aktivieren, wechseln Sie zu edge://flags#enable-experimental-web-platform-features , und legen Sie das Kontrollkästchen auf Aktiviert fest.

Informationen zum Verlauf dieses Features im Chromium Open-Source-Projekt finden Sie unter Problem 1092093.

Siehe auch:

• Referenz zu CSS-Features

Anzeigen von Details zu blockierten Features in der Frame-Detailansicht

Berechtigungsrichtlinie ist eine Webplattform-API, die einer Website die Möglichkeit gibt, die Verwendung von Browserfeatures in einem einzelnen Frame oder in einem iframe einzubettenden Frame zuzulassen oder zu blockieren. So zeigen Sie details dazu an, warum ein Feature blockiert wird:

1. Wechseln Sie zu OOPIF-Berechtigungsrichtlinie.
2. Öffnen Sie das Anwendungstool .
3. Klicken Sie auf einen Frame.
4. Wechseln Sie zum Abschnitt Berechtigungsrichtlinie .
5. Suchen Sie die Eigenschaft Deaktivierte Features .
6. Klicken Sie auf Details anzeigen.
7. Klicken Sie auf das Symbol neben jeder Richtlinie, um zu der iframe Netzwerkanforderung oder zu wechseln, die das Feature blockiert hat.

Siehe auch:

• Berechtigungsrichtlinienerklärer
• Anwendungstool zum Verwalten des Speichers

Informationen zum Anzeigen des Verlaufs dieses Features im Chromium Open-Source-Projekt finden Sie unter Problem 1158827.

Filtern von Experimenten in der Einstellung Experimente

Mit dem neuen Experimentfilter können Sie Experimente schneller finden. So aktivieren Sie beispielsweise neue Experimente für Codeprobleme:

1. Wählen Sie in DevTools Einstellungen (") >Experimente aus.

2. Beginnen Sie im Textfeld Filter mit der Eingabe von Problemen:

Siehe auch:

• Experimentelle Features in Microsoft Edge DevTools

Neue Spalte "Vary Header" im Bereich "Cachespeicher"

Verwenden Sie im Bereich Cachespeicher des Anwendungstools die neue Vary Header Spalte, um die Werte des Vary HTTP-Antwortheaders anzuzeigen:

Informationen zum Verlauf dieses Features im Chromium Open-Source-Projekt finden Sie unter Problem 1186049.

Siehe auch:

• Variieren inHypertext Transfer Protocol (HTTP/1.1): Semantik und Inhalt.
• Anzeigen von Cachedaten

Verbesserungen beim Quellentool

Unterstützung für neue JavaScript-Features

DevTools unterstützt jetzt die neuen Private Brand Checks a.k.a. #foo in obj JavaScript-Sprachfeature. Das Feature zur Überprüfung der privaten Marke erweitert den in Operator, um private (#) Klassenfelder für ein bestimmtes Objekt zu unterstützen. Probieren Sie es in den Tools Konsole und Quellen aus.

So überprüfen Sie die privaten Felder:

1. Wechseln Sie im Tool Quellen zum Debuggerbereich .
2. Erweitern Sie den Abschnitt Bereich :

Siehe auch:

• Private Brand Checks a.k.a. #foo in obj bei v8.dev.
• in-Operator bei MDN.
• Private Klassenfelder bei v8.dev.

Informationen zum Verlauf dieses Features im Chromium Open-Source-Projekt finden Sie unter Problem 11374.

Verbesserte Unterstützung für das Debuggen von Haltepunkten

In Microsoft Edge Version 90 oder früher legen DevTools nur Breakpoints in einem einzelnen Bundle fest. In Microsoft Edge Version 91 oder höher legt DevTools beim Debuggen einer freigegebenen Komponente Breakpoints in mehreren Paketen ordnungsgemäß fest.

Moderne JavaScript-Bundler wie Webpack und Rollup unterstützen das Aufteilen von Code in Bündel. Weitere Informationen finden Sie unter Codeteilung.

Informationen zum Verlauf dieses Features im Chromium Open-Source-Projekt finden Sie unter Probleme 1142705, 979000 und 1180794.

Siehe auch:

• Anhalten von Code mit Haltepunkten

Unterstützung der Hovervorschau mit Klammernotation

Das Quellentool unterstützt jetzt die Vorschau auf JavaScript-Memberausdrücke, die die [] Notation verwenden:

Informationen zum Verlauf dieses Features im Chromium Open-Source-Projekt finden Sie unter Problem 1178305.

Siehe auch:

• JavaScript-Debugfeatures

Verbesserte Gliederung von HTML-Dateien

DevTools verfügt jetzt über eine bessere Unterstützung für Gliederungen für .html Dateien. Öffnen Sie im Tool Quellen die .html Datei. Um die Codegliederung zu aktivieren (oder zu deaktivieren), drücken Sie STRG+UMSCHALT+O unter Windows/Linux oder BEFEHL+UMSCHALT+O unter macOS. Zuvor wurden von DevTools nur einige der Funktionen angezeigt. In der folgenden Abbildung listet DevTools jetzt alle Funktionen in der Gliederung ordnungsgemäß auf:

Informationen zum Verlauf dieses Features im Chromium Open-Source-Projekt finden Sie unter Probleme 761019 und 1191465.

Siehe auch:

• Tastenkombinationen des Quellentools in Tastenkombinationen
• Verwenden des Editorbereichs zum Anzeigen oder Bearbeiten von Dateien in der Übersicht über das Quellentool

Ordnungsgemäße Fehlerstapelablaufverfolgungen für das Wasm-Debuggen

In Microsoft Edge Version 90 oder früher wurden in DevTools nur generische Wasm-Verweise in Fehlerstapelablaufverfolgungen angezeigt. In Microsoft Edge Version 91 oder höher löst DevTools Inlinefunktionsanforderungen auf und zeigt den Quellspeicherort in Fehlerstapelablaufverfolgungen für wasm-Debuggen an. Weitere Informationen zu Fehlerstapelablaufverfolgungen in der Konsole finden Sie unter Fehler in Der Api-Referenz für Konsolenobjekte.

In Microsoft Edge Version 91 oder höher löst DevTools Inlinefunktionsanforderungen auf und zeigt die richtigen Fehlerstapelablaufverfolgungen für das Wasm-Debuggen an.

In Microsoft Edge Version 90 und früheren Versionen wird der Quellspeicherort nicht in den Fehlerstapelablaufverfolgungen angezeigt. Quellspeicherorte sind .dsquare Vorherige Fehlerstapelablaufverfolgungen für das Wasm-Debuggen:

In Microsoft Edge Version 91 und höher wird der Quellspeicherort in den Ablaufverfolgungen des Fehlerstapels angezeigt. Ordnungsgemäße Fehlerstapelablaufverfolgungen für das Wasm-Debuggen:

Informationen zum Verlauf dieses Features im Chromium Open-Source-Projekt finden Sie unter Problem 1189161.

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Jecelyn Yeen (Developer Advocate, Chrome DevTools) verfasst.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.