Neuerungen in DevTools (Microsoft Edge 83)
Gemäß dem aktualisierten Chromium Zeitplan passen wir unseren Zeitplan für bevorstehende Microsoft Edge-Releases an und kündigen das Microsoft Edge 82-Release. Weitere Informationen finden Sie in unserem Blogbeitrag .
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 .
Ankündigungen des Microsoft Edge DevTools-Teams
Remotedebuggen von Microsoft Edge auf Windows 10 oder höheren Geräten
Die App Remotetools für Microsoft Edge (Beta) ist jetzt im Microsoft Store verfügbar. Diese App erweitert das Windows-Geräteportal. Sie können eine Verbindung von Microsoft Edge auf Ihrem Entwicklungscomputer mit einem Remotegerät Windows 10 oder höher herstellen und eine Liste der Ziele anzeigen. Diese Liste der Ziele enthält alle Registerkarten in Microsoft Edge und PWAs , die auf dem Windows-Gerät geöffnet sind. Verwenden Sie DevTools auf Ihrem Entwicklungscomputer für ein Ziel, das auf dem Windows-Remotegerät ausgeführt wird.
Lesen Sie unseren Leitfaden zum Einrichten Ihres Windows 10 Geräts und Ihres Entwicklungscomputers für das Remotedebuggen: Remotedebuggen von Windows-Geräten.
Teilen Sie uns Ihre Remotedebugfunktion mit, indem Sie twittern oder auf das Symbol "Feedback senden " klicken.
Neue Möglichkeiten für den Zugriff auf Einstellungen
Es gibt tonnenweise Einstellungen für DevTools, die Sie anpassen können, damit DevTools so aussehen, wie Sie es brauchen und funktionieren. In Microsoft Edge 83 ist der Zugriff auf Einstellungen in DevTools jetzt viel einfacher. Öffnen Sie Einstellungen, indem Sie auf das Zahnradsymbol neben Konsolenwarnungen und das menü Standard klicken.
Sie können einstellungen auch im Hauptmenü unter Weitere Tools öffnen.
Chromium Problem #1050855
Neue und verbesserte Infoleisten
Informationsbenachrichtigungsleisten (Infoleisten) in DevTools verfügen jetzt über ein verbessertes Aussehen und mehr Funktionalität. In Microsoft Edge 83 sind Infoleisten einfacher zu lesen und stellen Schaltflächen bereit, sodass Sie die entsprechende Aktion sofort ausführen können.
Chromium Problem #1056348
Navigieren in der Farbauswahl mit der Tastatur
In früheren Versionen von Microsoft Edge konnten Sie nicht mit der Tastatur im Abschnitt Schattierungen der Farbauswahl navigieren. In Microsoft Edge 83 können Sie jetzt die Tastatur verwenden, um den Selektor im Abschnitt Schattierungen der Farbauswahl zu verschieben.
Die Farbauswahl ist eine GRAFISCHE Benutzeroberfläche im Bereich Elemente zum Ändern color von und background-color Deklarationen:
Chromium Problem #963183
Siehe auch:
Registerkarte "Eigenschaften" wird jetzt nach einer Seitenaktualisierung aufgefüllt
In Microsoft Edge 81 und früher wurde die Registerkarte Eigenschaften im Bereich Elemente durch Seitenaktualisierungen unterbrochen. Beim Aktualisieren der Seite wurden auf der Registerkarte Eigenschaften die Eigenschaften des aktuell ausgewählten Elements nicht aufgefüllt:
In Microsoft Edge 83 können Sie jetzt die Eigenschaften des aktuell ausgewählten Elements nach einer Seitenaktualisierung auf der Registerkarte Eigenschaften anzeigen:
Chromium Problem #1050999
Siehe auch:
Verwenden der Pfeiltasten zum Scrollen im Änderungstool
Das Tool "Änderungen" verfolgt alle Änderungen nach, die Sie an CSS oder JavaScript in DevTools vorgenommen haben. Sie können das Tool "Änderungen " verwenden, um alle Änderungen schnell anzuzeigen und diese an Ihren Editor/Ihre IDE zurückzunehmen.
Um das Änderungstool zu öffnen, drücken Sie in DevTools STRG+UMSCHALT+P (Windows/Linux) oder BEFEHL+UMSCHALT+P (macOS), um das Befehlsmenü zu öffnen, und geben Sie dann ein changes. Wählen Sie den Befehl Änderungen anzeigen aus, und drücken Sie dann die EINGABETASTE. Das Tool "Änderungen" wird im Drawer geöffnet.
Wenn Sie eine Änderung an einer minimierten Datei vorgenommen haben, können Sie mit dem Tool "Änderungen " horizontal scrollen, um Ihren gesamten minimierten Code anzuzeigen. Ab Microsoft Edge 83 können Sie mithilfe der Pfeiltasten auf der Tastatur horizontal scrollen.
Wenn Sie die Bildschirmsprachausgabe oder die Tastatur verwenden, um in DevTools zu navigieren, senden Sie uns Ihr Feedback, indem Sie an uns twittern oder auf das Symbol Feedback senden klicken.
Chromium Problem #963183
Siehe auch:
Ankündigungen aus dem Chromium-Projekt
In den folgenden Abschnitten werden zusätzliche Features angekündigt, die in Microsoft Edge 83 verfügbar sind und zum Open Source Chromium-Projekt beigetragen wurden.
Emulieren von Sehschwächen
Verwenden Sie im Rendering-Tool das neue Feature Sehfehler emulieren , um eine bessere Vorstellung davon zu erhalten, wie Personen mit unterschiedlichen Arten von Sehschwächen Ihre Website erleben:
DevTools kann unscharfes Sehen und die folgenden Arten von Farbsichtfehlern emulieren:
| Farbsehen-Mangel | Details |
|---|---|
| Protanopie | Die Unfähigkeit, ein rotes Licht wahrzunehmen. |
| Deuteranopie | Die Unfähigkeit, grünes Licht wahrzunehmen. |
| Tritanopia | Die Unfähigkeit, blaues Licht wahrzunehmen. |
| Achromatopsie | Die Unfähigkeit, jede Farbe wahrzunehmen, mit Ausnahme von Grautönen (extrem selten). |
Weniger extreme Versionen dieser farblichen Sehschwächen sind vorhanden und häufiger. Protanomaly ist beispielsweise eine reduzierte Empfindlichkeit gegenüber rotem Licht (im Gegensatz zur Protanopie, die die vollständige Unfähigkeit ist, rotes Licht wahrzunehmen). Diese Anomalie-Sehschwächen sind jedoch nicht so klar definiert: Jede Person mit einem solchen Sehmangel ist anders und kann die Dinge anders sehen (in der Lage zu sein, mehr oder weniger der relevanten Farben wahrzunehmen).
Durch das Entwerfen für die extremeren Simulationen in DevTools sind Ihre Web-Apps garantiert auch für Personen mit Sehschwächen zugänglich.
Senden Sie Ihr Feedback, indem Sie twittern oder auf das Symbol Feedback senden klicken.
Chromium Issue #1003700
Siehe auch:
- Emulieren von Sehschwächen
- Analysieren der Renderingleistung mit dem Renderingtool in derReferenz zu Leistungsfeatures
- Arten von Farbblindheit, bei Colourblindawareness.org.
Emulieren von Gebietsschemas
Wählen Sie zum Emulieren von Gebietsschemas im Sensortool einen Standort aus der Dropdownliste Standort aus. (Um auf das Sensortool zuzugreifen, öffnen Sie das Befehlsmenü , und geben Sie ein Sensors.) Nachdem Sie einen Speicherort ausgewählt haben, ändert DevTools das aktuelle Standardgebietsschema, was sich auf den folgenden Code auswirkt:
Intl.*APIs, z. B.:new Intl.NumberFormat().resolvedOptions().locale- Andere gebietsschemafähige JavaScript-APIs wie
String.prototype.localeCompareund*.prototype.toLocaleString, z. B.:123_456..toLocaleString() - DOM-APIs wie
navigator.languageundnavigator.languages - Http-Anforderungsheader "Accept-Language"
Hinweis
Updates und navigator.languagenavigator.languages sind nicht sofort sichtbar, sondern erst nach der nächsten Navigation oder Seitenaktualisierung. Änderungen am Accept-Language HTTP-Header werden nur für nachfolgende Anforderungen übernommen.
Informationen zum Ausprobieren einer Demo finden Sie unter Gebietsschemaabhängiges Codebeispiel.
Chromium Problem #1051822
Siehe auch:
Debuggen der Cross-Origin Embedder Policy (COEP)
Im Bereich Netzwerk werden jetzt Debuginformationen zur Richtlinie für die einbettungsübergreifende Einbettung bereitgestellt.
Die Spalte Status enthält nun eine kurze Erläuterung, warum eine Anforderung blockiert wurde, sowie einen Link zum Anzeigen der Header dieser Anforderung für das weitere Debuggen:
Der Abschnitt Antwortheader der Registerkarte Header enthält weitere Anleitungen zum Beheben der Probleme:
Senden Sie Ihr Feedback, indem Sie twittern oder auf das Symbol Feedback senden klicken.
Chromium Problem #1051466
Siehe auch:
- Blockieren von Anforderungen in "Netzwerkaktivität überprüfen".
Neue Symbole für Haltepunkte, bedingte Haltepunkte und Protokollpunkte
Update: Ab 2022 werden Haltepunkte jetzt durch ein blaues Rechteck anstelle eines roten Kreises angezeigt.
Der Quellenbereich enthält neue Symbole für Haltepunkte, bedingte Haltepunkte und Protokollpunkte:
- Haltepunkte (
) werden durch rote Kreise dargestellt. - Bedingte Haltepunkte (
) werden durch halbrote halbweiße Kreise dargestellt. - Protokollpunkte (
) werden durch rote Kreise mit Konsolensymbolen dargestellt.
Die Motivation für die neuen Symbole bestand darin, die Benutzeroberfläche mit anderen TOOLS zum Debuggen von GUI-Apps (die in der Regel Haltepunkte rot einfärben) zu gestalten und die Unterscheidung zwischen den drei Features auf einen Blick zu erleichtern.
Chromium Problem #1041830
Siehe auch:
Anzeigen von Netzwerkanforderungen, die einen bestimmten Cookiepfad festlegen
Verwenden Sie den neuen cookie-path Filter Schlüsselwort (keyword) im Netzwerktool, um sich auf die Netzwerkanforderungen zu konzentrieren, die einen bestimmten Cookiepfad festlegen.
Weitere Schlüsselwörter wie cookie-pathfinden Sie unter Filtern von Anforderungen nach Eigenschaften in der Referenz zu Netzwerkfeatures.
Links vom Befehlsmenü andocken
Um DevTools auf die linke Seite des Viewports (gerenderte Webseite) zu verschieben, öffnen Sie das Befehlsmenü , und führen Sie den Dock to left Befehl aus. Das Feature "Nach links andocken" ist seit Microsoft Edge 75 verfügbar, war jedoch zuvor nur über das menü Standard zugänglich. Sie können jetzt auch über das Befehlsmenü auf das Feature Nach links andocken zugreifen.
"
Senden Sie Ihr Feedback, indem Sie twittern oder auf das Symbol Feedback senden klicken.
Chromium Problem #1011679
Siehe auch:
Der Überwachungsbereich ist jetzt das Lighthouse-Panel
Das DevTools-Team erhielt häufig Feedback von Webentwicklern, dass es zwar möglich war , Lighthouse über DevTools auszuführen, aber als sie es ausprobierten, kein "Lighthouse"-Panel fanden. Daher wird das Überwachungspanel jetzt als Lighthouse-Panel bezeichnet.
Hinweis: Das Lighthouse-Panel stellt Links zu Inhalten bereit, die auf Websites von Drittanbietern gehostet werden. Microsoft ist nicht verantwortlich und hat keine Kontrolle über den Inhalt dieser Websites und alle Daten, die sie möglicherweise sammeln.
Siehe auch:
Löschen aller lokalen Außerkraftsetzungen in einem Ordner
Nachdem Sie lokale Außerkraftsetzungen eingerichtet haben, können Sie mit der rechten Maustaste auf ein Verzeichnis klicken und dann die neue Option Alle Außerkraftsetzungen löschen auswählen, um alle lokalen Außerkraftsetzungen in diesem Ordner zu löschen.
Senden Sie Ihr Feedback, indem Sie twittern oder auf das Symbol Feedback senden klicken.
Chromium Problem #1016501
Siehe auch:
Aktualisierte Benutzeroberfläche für lange Aufgaben
Ein langer Task ist JavaScript-Code, der den Standard Thread für eine lange Zeit monopolisiert, wodurch eine Webseite einfriert.
Sie können lange Aufgaben bereits seit einer Weile im Leistungsbereich visualisieren , aber in Microsoft Edge 83 wurde die Visualisierungsoberfläche für lange Aufgaben im Leistungsbereich aktualisiert. Der Lange Vorgangsteil einer Aufgabe ist jetzt mit einem gestreiften roten Hintergrund gefärbt:
Senden Sie Ihr Feedback, indem Sie twittern oder auf das Symbol Feedback senden klicken.
Chromium Problem #1054447
Unterstützung für maskierbare Symbole im Manifestbereich
Es gibt ein neues Kontrollkästchen, Nur den minimalen sicheren Bereich für maskierbare Symbole anzeigen, im Bereich Manifest des Anwendungstools .
Android Oreo hat adaptive Symbole eingeführt, die App-Symbole in einer Vielzahl von Formen in verschiedenen Gerätemodellen anzeigen. Maskierbare Symbole sind ein neues Symbolformat, das adaptive Symbole unterstützt, mit denen Sie sicherstellen können, dass Ihr PWA-Symbol auf Geräten, die den Standard für maskierbare Symbole unterstützen, gut aussieht.
Um zu überprüfen, ob Ihr maskierbares Symbol auf Android Oreo-Geräten gut aussieht, aktivieren Sie im Bereich Manifest des Anwendungstools das neue Kontrollkästchen Nur den minimalen sicheren Bereich für maskierbare Symbole anzeigen:
Dieses Feature wurde in Microsoft Edge 81 gestartet. Die hier in Microsoft Edge 83 behandelten Updates wurden in Neuigkeiten in DevTools (Microsoft Edge 81) nicht behandelt.
Siehe auch:
- Anzeigen, Bearbeiten und Löschen von Cookies : Artikel zum Anwendungstool .
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 befindet sich hier und wurde von Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse) verfasst.
Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.