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.
Tipp
Die Microsoft Build 2022-Konferenz fand vom 24. bis 26. Mai statt. Weitere Informationen zu neuen Features für Speicher-, Leistungs- und Produktionsdebugging in DevTools sowie zu neuen Funktionen der Webplattform für PWAs finden Sie in den folgenden Videos:
Video: Microsoft Edge | Neuigkeiten in DevTools 102
DevTools-Erweiterung: Neuer Browser mit Geräte- und Modusemulation und Sourcemap-Unterstützung
Die Microsoft Edge DevTools-Erweiterung für Visual Studio Code verfügt jetzt über eine Browservorschau, mit der Sie verschiedene Geräte emulieren können. Klicken Sie auf die neue Schaltfläche CSS-Medienfeatures emulieren (
), um eine Vorschau des aktuellen Projekts in verschiedenen Modi wie Dunkel, Hell, Drucken und Hoher Kontrast anzuzeigen:
Klicken Sie auf die neue Schaltfläche " Sehschwächen emulieren " (
"), um die Barrierefreiheit einfach zu testen, z. B. um anzuzeigen, wie die Webseite mit verschwommener Sicht oder Farbsehschwäche aussieht.
Zu den weiteren neuen Funktionen gehört eine einfachere Möglichkeit, die CSS-Spiegelung umzuschalten, die jetzt auch Sourcemaps unterstützt. Das bedeutet, dass Sie CSS, das von Sass, React und anderen Abstraktionen erstellt wurde, live im Browser debuggen und ändern und die Änderungen in den Quelldateien sehen können.
Siehe auch:
- Geräte- und Statusemulation
- Zuordnen des verarbeiteten Codes zu Ihrem ursprünglichen Quellcode zum Debuggen
- CSS-Spiegelbearbeitung mit Sourcemaps: Bekannte Probleme und Feedback
Speichern aller Zeichenfolgen aus einer Heap-Momentaufnahme in JSON
Wenn Sie in Microsoft Edge 102 eine Heap-Momentaufnahme im Speichertool erstellen, können Sie jetzt alle Zeichenfolgenobjekte aus der Momentaufnahme in eine JSON-Datei exportieren. Klicken Sie im Tool Speicher im Abschnitt Konstruktor auf die neue Schaltfläche Alle in Datei speichern neben dem (string) Eintrag.
Das Speichertool exportiert eine JSON-Datei, die alle Zeichenfolgenobjekte aus der Heap-Momentaufnahme enthält:
Siehe auch:
- Speichern und Exportieren von Zeichenfolgen aus einer Heap-Momentaufnahme in JSON in "Heap-Momentaufnahmen aufzeichnen" mithilfe des Speichertools (Profiltyp "Heap-Momentaufnahme").
Neue Filter für Retainer im Memory-Tool
In früheren Versionen von Microsoft Edge wurden Zyklen und interne Knoten im Abschnitt "Halterungen" einer Heap-Momentaufnahme angezeigt. Um den Retainer-Pfad zu vereinfachen, verfügt der Abschnitt "Retainer" im Speichertool in Microsoft Edge 102 jetzt über neue Filter zum Ausblenden von Zyklen und zum Ausblenden interner Knoten im Retainer-Pfad.
Im Abschnitt "Retainer" wird ein zyklischer Knoten durch eine abgeblendete Darstellung angezeigt.
In der folgenden Abbildung ist im Dropdownmenü "Kanten filtern " die Option "Radverkehr ausblenden" nicht ausgewählt, sodass ein zyklischer Knoten (ausgegraut) angezeigt wird:
In der folgenden Abbildung ist im Dropdownmenü "Kanten filtern " die Option "Radverkehr ausblenden" ausgewählt, sodass der zyklische Knoten nicht angezeigt wird:
Zyklen sind Knoten, die mindestens zweimal in einem Retainerpfad vorkommen. Ein Aussehen eines Knotens befindet sich früher im Retainer-Pfad, und andere Erscheinungsbilder dieses Knotens befinden sich später im Retainer-Pfad. Um Arbeitsspeicher freizugeben, ist es am wichtigsten, das Vorkommen des Knotens zu entfernen, der zuerst im Retainer-Pfad angezeigt wird. Das zweite und möglicherweise nachfolgende Vorkommen des Knotens werden weiterhin im Abschnitt "Retainer" angezeigt.
Interne Knoten sind Objekte, die spezifisch für V8 sind (das JavaScript-Modul in Microsoft Edge). Interne Knoten werden auch im Abschnitt "Retainer" angezeigt.
Siehe auch:
- Blenden Sie Zyklen in "Heap-Momentaufnahmen aufzeichnen" mithilfe des Speichertools aus (Profilerstellungstyp "Heap-Momentaufnahme").
Die QuickInfo "Element überprüfen" kann jetzt so lange beibehalten werden, bis Sie sie schließen
Zuvor wurde im Tool "Elemente" die Überlagerung für den ausgewählten Knoten nur beim Hovern angezeigt, wenn Sie das Tool "Überprüfen
") verwendet haben. Das vorherige Design war schwierig mit einer Bildschirmlupe oder anderen Hilfstechnologien zu verwenden.
Wenn Sie in Microsoft Edge 102 das Untersuchungstool verwenden und sich auf der gerenderten Webseite bewegen, können Sie die aktuelle Inspect-Überlagerung angezeigt lassen. Halten Sie Strg+Alt (Windows, Linux) oder Strg+Option (macOS) gedrückt, während Sie sich auf der gerenderten Webseite bewegen. Die vorhandene QuickInfo- und Rasterfarbüberlagerung für das Untersuchungstool wird weiterhin angezeigt, während Sie den Mauszeiger über verschiedene Teile der gerenderten Webseite bewegen:
Außerdem können Sie jetzt STRG drücken, um die Überlagerung des Untersuchungstools auszublenden, während Sie den Mauszeiger über die gerenderte Webseite bewegen.
Den Verlauf dieses Features im Open-Source-Projekt Chromium finden Sie unter Problem 1316208.
Siehe auch:
- Beibehalten der QuickInfo und der Rasterfarbüberlagerung des Untersuchungstools in Seiten analysieren mit dem Untersuchungstool.
- Beibehalten der QuickInfo und der Rasterfarbüberlagerung des Überprüfungstools in DevTools mit Hilfstechnologien.
Verbesserte Darstellung von Dropdownmenüs, Schaltflächen und Symbolen im Modus für hohen Kontrast
In früheren Versionen von Microsoft Edge wurden die folgenden Elemente im Modus für hohen Kontrast nicht ordnungsgemäß gerendert:
- Dropdownmenüs im Tool "Probleme ".
- Schaltflächen im Werkzeug " Getrennte Elemente ".
- Die Aktivitätsleiste im Fokusmodus.
In Microsoft Edge 102 wurden diese Probleme behoben.
Die Menüs des Problems werden im Modus "Hoher Kontrast" korrekt angezeigt:
Die Benutzeroberfläche des Tools " Getrennte Elemente " wird im Modus "Hoher Kontrast" korrekt angezeigt:
Die Aktivitätsleiste und der Schnellansichtsbereich (bei Verwendung des Fokusmodus) werden im Modus für hohen Kontrast ordnungsgemäß angezeigt:
Siehe auch:
Informationen zu Experimenten in DevTools über Einstellungen
Auf der> Seite"Einstellungsexperimente" verfügt jetzt jedes Experiment über eine Schaltfläche "Hilfe" (
):
Um weitere Informationen über ein experimentelles Feature zu erhalten, klicken Sie auf die entsprechende Schaltfläche Hilfe (). Die Schaltfläche Hilfe zeigt den relevanten Abschnitt des Artikels Experimentelle Features in Microsoft Edge DevTools an.
Besseres Layout der Netzwerkeinstellungen, wenn schmal
In früheren Versionen von Microsoft Edge überlappte sich das Öffnen von Netzwerkeinstellungen mit dem Zahnradsymbol im Netzwerktool , wenn die DevTools sehr schmal waren:
In Microsoft Edge 102 wurde dieses Problem behoben. Die einzelnen Einstellungen werden nun in schmalen Layouts besser dargestellt:
Siehe auch:
- Mitschreiben von Screenshots während des Ladens der Seite in Referenz zu Netzwerkfeatures über die konfigurierbaren Einstellungen des Netzwerktools.
Ankündigungen aus dem Chromium-Projekt
Microsoft Edge 102 enthält auch die folgenden Updates aus dem Chromium-Projekt:
- Neue Tastenkombinationen zum Emulieren von hellen und dunklen Designs
- Verbesserte Sicherheit auf der Registerkarte "Netzwerkvorschau"
- Verbessertes Nachladen am Haltepunkt
- Konsolenupdates
- Anzeigen geerbter Hervorhebungspseudoelemente im Bereich "Formatvorlagen"
- [Experimentell] CSS-Änderungen kopieren
- [Experimentell] Farbe außerhalb des Browsers auswählen