Neuigkeiten in DevTools (Microsoft Edge 101)

Dies sind die neuesten DevTools-Features in der stabilen Version von Microsoft Edge.

Video: Microsoft Edge | Neuigkeiten in DevTools 101

Das Konsolentool ist jetzt in Visual Studio Code verfügbar

Die Konsole ist eines der beliebtesten Tools in DevTools. Sie können jetzt auf das Konsolentool in der Microsoft Edge Developer Tools-Erweiterung für Visual Studio Code zugreifen. Mit dieser integrierten DevTools-Konsole können Sie Ihre Protokollnachrichten direkt neben Ihrem Code anzeigen. Über die Konsole können Sie auch:

• Probieren Sie JavaScript-Anweisungen aus.
• Greifen Sie auf das Fensterobjekt zu.
• Rufen Sie die Methoden des Console Objekts auf, wie in Konsolenobjekt-API-Referenz beschrieben.
• Verwenden Sie die Konsolenhilfsprogramme, um auf das DOM zuzugreifen, wie unter Hilfsfunktionen und Selektoren des Konsolentools beschrieben.

Sie können die Konsole als Haupttool verwenden oder sie zusammen mit den Tools "Elemente " und "Netzwerk" verwenden.

Das Konsolentool, das in der Hauptsymbolleiste der Microsoft Edge DevTools-Erweiterung für Visual Studio Code geöffnet ist:

Das Konsolentool, das in der Schublade der Microsoft Edge DevTools-Erweiterung für Visual Studio Code geöffnet ist:

Weitere Informationen finden Sie unter Konsolenintegration.

Quellzuordnungen werden jetzt mit IndexedDB zwischengespeichert.

Wenn Sie in früheren Versionen von Microsoft Edge große Quellzuordnungsdateien auf Ihrem Server oder im Azure Artifacts-Symbolserver gehostet haben, hat DevTools diese Quellzuordnungen bei jeder Aktualisierung der Seite abgerufen. Das wiederholte Abrufen dieser Quellzuordnungen führte zu mehr Netzwerkanforderungen für DevTools und verlangsamte das Debuggen.

In Microsoft Edge 101 speichert DevTools Quellzuordnungen mithilfe von IndexedDB zwischen. Wenn Sie die Seite aktualisieren, werden Quellzuordnungen jetzt aus dem IndexedDB-Cache bereitgestellt, anstatt erneut von Ihrem Server oder dem Azure Artifacts-Symbolserver angefordert zu werden. Verwenden Sie die Spalte "Status beim Laden" im Tool "Quellzuordnungsmonitor", um sicherzustellen, dass Quellzuordnungen aus dem Cache geladen werden. Um den IndexedDB-Cache zu leeren und DevTools zum Neuladen von Quellzuordnungen zu zwingen, führen Sie den Befehl Cache für Quellzuordnungen löschen im Befehlsmenü aus.

Wenn du die Webseite zum ersten Mal lädst, zeigt das Tool Source-Map-Monitor an, dass die Source-Maps noch nicht zwischengespeichert sind:

Wenn Sie die Webseite neu laden, zeigt das Tool Source Maps Monitor , dass die zwischengespeicherten Source-Maps verwendet werden:

Nachverfolgen ausstehender Netzwerkanforderungen beim Exportieren von HAR-Dateien

In Microsoft Edge 101 wurde dem Netzwerktool die neue Statustextspalte hinzugefügt. Die Spalte "Statustext" enthält lesbare, gleichwertige Meldungen für die HTTP-Statuscodes, die in der Spalte "Status" gemeldet werden.

Darüber hinaus wurde dem Netzwerktool eine neue Einstellung hinzugefügt: Ausstehende Anforderungen in die HAR-Datei einschließen. Wenn Sie beim Exportieren einer HAR-Datei im Netzwerktool ausstehende Netzwerkanforderungen aufzeichnen müssen, aktivieren Sie die Einstellung Ausstehende Anforderungen in HAR-Datei einschließen . Die Spalte Statustext enthält jetzt den Status (ausstehend) für alle ausstehenden Netzwerkanforderungen.

Weitere Informationen zu den verfügbaren Spalten im Anforderungsprotokoll finden Sie unter Referenz > zu Netzwerkfeatures Hinzufügen oder Entfernen von Spalten.

Aktualisierte Benutzeroberfläche und Kamerasteuerelemente in der 3D-Ansicht

In Microsoft Edge 101 verfügt das Tool für die 3D-Ansicht über zwei neue Schaltflächen: Ansicht schwenken (") und Ansicht drehen ( Verwenden Sie diese Schaltflächen, um zwischen Schwenken der Leinwand und Drehen der Leinwand zu wechseln. Klicken Sie auf die Schaltfläche Ansicht schwenken oder Ansicht drehen und ziehen Sie dann mit der Maus in die gewünschte Richtung, oder verwenden Sie die Pfeiltasten.

Die Benutzeroberfläche bietet nun eine einheitlichere und intuitivere Benutzeroberfläche. Die Bereiche sind übersichtlicher angeordnet, und Probleme mit der Barrierefreiheit wurden behoben.

Weitere Informationen finden Sie unter Navigieren in Webseiten-Layern, Z-Index und DOM mithilfe des 3D-Ansichtswerkzeugs.

Das Wechseln von Designs erfordert nicht mehr das erneute Laden von DevTools

In früheren Versionen von Microsoft Edge erforderte das Wechseln von Designs in DevTools ein erneutes Laden von DevTools, um das neue Design anzuwenden. In Microsoft Edge 101 können Sie schnell verschiedene Designs ausprobieren, ohne DevTools neu laden zu müssen.

Ankündigungen aus dem Chromium-Projekt

Microsoft Edge 101 enthält auch die folgenden Updates aus dem Chromium-Projekt:

• Anzeigen von Übergabe-Layern im Bereich "Formatvorlagen"
• Unterstützung für die hwb() color-Funktion
• Verbesserte Anzeige von privaten Eigenschaften

Siehe auch

• Neuerungen in den Microsoft Edge-DevTools
• Versionshinweise für die Microsoft Edge-Webplattform