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.
Dem aktualisierten Chromium-Zeitplan folgend, passen wir unseren Zeitplan für kommende Microsoft Edge-Versionen an und stornieren die Microsoft Edge 82-Version. Weitere Informationen finden Sie in unserem Blogbeitrag .
Dies sind die neuesten DevTools-Features in der stabilen Version von Microsoft Edge.
Ankündigungen des Microsoft Edge DevTools-Teams
Remotedebuggen von Microsoft Edge auf Geräten unter Windows 10 oder höher
Die App "Remotetools für Microsoft Edge" ist jetzt im Microsoft Store verfügbar. Diese App erweitert das Windows-Geräteportal. Sie können von Microsoft Edge, das auf Ihrem Entwicklungscomputer ausgeführt wird, eine Verbindung zu einem Remotegerät mit Windows 10 oder höher herstellen und eine Liste von Zielen anzeigen. Diese Liste der Ziele umfasst alle Registerkarten in Microsoft Edge und PWAs, die auf dem Windows-Gerät geöffnet sind. Verwenden Sie DevTools auf Ihrem Entwicklungscomputer gegen ein Ziel, das auf dem Windows-Remotegerät ausgeführt wird.
Lesen Sie unsere Anleitung zum Einrichten Ihres Windows 10-Geräts und Ihres Entwicklungscomputers für Remotedebugging: Remotedebuggen von Windows-Geräten.
Teilen Sie uns Ihre Erfahrungen beim Remotedebuggen mit, indem Sie uns twittern oder auf das Symbol "Feedback senden " klicken.
Neue Möglichkeiten für den Zugriff auf Einstellungen
Es gibt unzählige Einstellungen für DevTools, die Sie anpassen können, damit DevTools so aussieht, sich anfühlt und funktioniert, wie Sie es wünschen. In Microsoft Edge 83 ist der Zugriff auf Einstellungen in DevTools jetzt viel einfacher. Öffnen Sie die Einstellungen , indem Sie auf das Zahnradsymbol neben Konsolenwarnungen und im Hauptmenü klicken.
Sie können die Einstellungen auch über das Hauptmenü unter Weitere Tools öffnen.
Chromium Problem #1050855
Neue und verbesserte Infoleisten
Informationsbenachrichtigungsleisten (Infoleisten) in DevTools haben jetzt ein verbessertes Aussehen und mehr Funktionalität. In Microsoft Edge 83 sind Infoleisten einfacher zu lesen und enthalten Schaltflächen, sodass Sie die entsprechende Aktion sofort ausführen können.
Chromium Problem #1056348
Navigieren im Farbwähler mit der Tastatur
In früheren Versionen von Microsoft Edge konnten Sie nicht mit der Tastatur im Abschnitt "Schattierungen " des Farbwählers navigieren. In Microsoft Edge 83 können Sie jetzt die Tastatur verwenden, um die Auswahl im Abschnitt "Schattierungen " des Farbwählers zu verschieben.
Der Farbwähler ist eine GUI im Elemente-Bedienfeld zum Ändern color und background-color Deklarieren:
Chromium Problem #963183
Siehe auch:
Die Registerkarte "Eigenschaften" wird nun nach einer Seitenaktualisierung ausgefüllt
In Microsoft Edge 81 und früheren Versionen wurde die Registerkarte "Eigenschaften" im Bedienfeld " Elemente " durch Seitenaktualisierungen unterbrochen. Beim Aktualisieren der Seite wurden die Eigenschaften des aktuell ausgewählten Elements auf der Registerkarte "Eigenschaften " 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 Sie die Pfeiltasten, um im Änderungstool zu scrollen
Das Änderungstool verfolgt alle Änderungen nach, die Sie in DevTools an CSS oder JavaScript vorgenommen haben. Mit dem Änderungstool können Sie schnell alle Ihre Änderungen anzeigen und diese zurück in Ihren Editor/Ihre IDE bringen.
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 changesdann ein. Wählen Sie den Befehl "Änderungen anzeigen" aus, und drücken Sie dann die EINGABETASTE. Das Änderungstool wird im Schnellansichtsbereich am unteren Rand von DevTools geöffnet.
Wenn Sie eine Änderung an einer minimierten Datei vorgenommen haben, können Sie mit dem Änderungstool horizontal scrollen, um den gesamten minimierten Code anzuzeigen. Ab Microsoft Edge 83 können Sie jetzt mit den Pfeiltasten auf der Tastatur horizontal scrollen.
Wenn Sie Sprachausgaben oder die Tastatur verwenden, um in DevTools zu navigieren, senden Sie uns Ihr Feedback, indem Sie 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 weitere in Microsoft Edge 83 verfügbare Features vorgestellt, die zum Open Source Chromium Projekt beigetragen haben.
Emulieren von Sehstörungen
Verwenden Sie im Rendering-Tool das neue Feature "Sehschwächen emulieren", um eine bessere Vorstellung davon zu bekommen, wie Personen mit verschiedenen Arten von Sehstörungen Ihre Website erleben:
DevTools kann verschwommenes Sehen und die folgenden Arten von Farbsehstörungen emulieren:
| Farbsehschwäche | Details |
|---|---|
| Protanopie | Die Unfähigkeit, rotes Licht wahrzunehmen. |
| Deuteranopia | Die Unfähigkeit, grünes Licht wahrzunehmen. |
| Tritanopie | Die Unfähigkeit, blaues Licht wahrzunehmen. |
| Achromatopsie | Die Unfähigkeit, irgendeine Farbe wahrzunehmen, außer Grautönen (extrem selten). |
Es gibt weniger extreme Versionen dieser Farbsehschwächen, die häufiger vorkommen. Zum Beispiel ist Protanomalie eine verminderte Empfindlichkeit gegenüber rotem Licht (im Gegensatz zu Protanopie, bei der es sich um die völlige Unfähigkeit handelt, rotes Licht wahrzunehmen). Diese -omaly Sehschwächen sind jedoch nicht so klar definiert: Jede Person mit einer solchen Sehschwäche ist anders und kann die Dinge anders sehen (sie können mehr oder weniger der relevanten Farben wahrnehmen).
Durch den Entwurf für die extremeren Simulationen in DevTools sind Ihre Web-Apps garantiert auch für Personen mit Sehschwächen zugänglich.
Senden Sie uns Ihr Feedback, indem Sie twittern oder auf das Symbol "Feedback senden" klicken.
Chromium issue #1003700
Siehe auch:
- Emulieren von Sehstörungen
- Analysieren der Renderingleistung mit dem Renderingtool in Referenz zu Leistungsfeatures
- Arten von Farbenblindheit, bei Colourblindawareness.org.
Gebietsschemas emulieren
Um Gebietsschemas zu emulieren, wählen Sie im Sensortool einen Standort aus der Dropdownliste Standort aus. ( Um auf das Sensorwerkzeug zuzugreifen, öffnen Sie das Befehlsmenü und geben Sie Sensorsein.) 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 gebietsschemabezogene JavaScript-APIs wie
String.prototype.localeCompareund*.prototype.toLocaleString, zum Beispiel:123_456..toLocaleString() - DOM-APIs wie
navigator.languageundnavigator.languages - Der HTTP-Anforderungsheader "Accept-Language"
Hinweis
Updates an navigator.language und navigator.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 angezeigt.
Informationen zum Testen einer Demo finden Sie unter Beispiel für gebietsschemaabhängigen Code.
Chromium Problem #1051822
Siehe auch:
- Außerkraftsetzung der Geolocation in Gerätesensoren emulieren.
Debuggen von COEP-Richtlinien (Cross-Origin Embedder Policy)
Der Netzwerkbereich enthält jetzt Informationen zum Debuggen ursprungsübergreifender Embedder-Richtlinien.
Die Spalte "Status " enthält jetzt eine kurze Erklärung, warum eine Anforderung blockiert wurde, sowie einen Link zum Anzeigen der Kopfzeilen dieser Anforderung zum weiteren Debuggen:
Der Abschnitt " Antwortheader" der Registerkarte "Header" enthält weitere Anleitungen zum Beheben der Probleme:
Senden Sie uns Ihr Feedback, indem Sie twittern oder auf das Symbol "Feedback senden" klicken.
Chromium Problem #1051466
Siehe auch:
- Blockieren Sie 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 Bereich "Quellen" enthält neue Symbole für Haltepunkte, bedingte Haltepunkte und Protokollpunkte:
- Haltepunkte (
) werden durch rote Kreise dargestellt. - Bedingte Haltepunkte (
) werden durch halb rote, halb weiße Kreise dargestellt. - Protokollpunkte (
) werden durch rote Kreise mit Konsolensymbolen dargestellt.
Die Motivation für die neuen Icons war, die Benutzeroberfläche konsistenter mit anderen GUI-Debugging-Tools zu machen (die normalerweise Breakpoints rot einfärben) und die Unterscheidung zwischen den 3 Features auf einen Blick zu erleichtern.
Chromium Problem #1041830
Siehe auch:
Netzwerkanforderungen anzeigen, die einen bestimmten Cookiepfad festlegen
Verwenden Sie das neue 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 Filteranforderungen nach Eigenschaften in der Referenz zu Netzwerkfeatures.
Links vom Befehlsmenü andocken
Um DevTools nach links vom Viewport (gerenderte Webseite) zu verschieben, öffnen Sie das Befehlsmenü , und führen Sie den Dock to left Befehl aus. Das Feature "Links andocken " ist seit Microsoft Edge 75 verfügbar, war aber zuvor nur über das Hauptmenü zugänglich. Sie können jetzt auch über das Befehlsmenü auf das Feature "Links andocken" zugreifen.
"
Senden Sie uns Ihr Feedback, indem Sie twittern oder auf das Symbol "Feedback senden" klicken.
Chromium Problem #1011679
Siehe auch:
Das Audit-Panel 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 beim Ausprobieren kein "Lighthouse"-Panel finden konnten. Daher wird das Audits-Panel jetzt Lighthouse-Panel genannt.
Hinweis: Das Lighthouse-Panel enthält Links zu Inhalten, die auf Websites Dritter gehostet werden. Microsoft ist nicht für den Inhalt dieser Websites und die von diesen gesammelten Daten verantwortlich und hat keine Kontrolle darüber.
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 uns Ihr Feedback, indem Sie twittern oder auf das Symbol "Feedback senden" klicken.
Chromium Problem #1016501
Siehe auch:
Aktualisierte Benutzeroberfläche für lange Aufgaben
Eine lange Aufgabe ist JavaScript-Code, der den Hauptthread für lange Zeit monopolisiert, wodurch eine Webseite einfriert.
Sie können lange Aufgaben schon seit einiger Zeit im Leistungsbereich visualisieren . In Microsoft Edge 83 wurde die Benutzeroberfläche für die Visualisierung langer Aufgaben im Leistungstool aktualisiert. Der lange Aufgabenteil eines Vorgangs wird jetzt mit einem roten Hintergrund gestreift:
Senden Sie uns 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 führte adaptive Symbole ein, die App-Symbole in einer Vielzahl von Formen auf verschiedenen Gerätemodellen anzeigen. Maskierbare Symbole sind ein neues Symbolformat, das adaptive Symbole unterstützt, sodass 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 eingeführt. 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 über das Anwendungstool .
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.