Neuerungen in DevTools (Microsoft Edge 96)

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

Um auf dem Laufenden zu bleiben und die neuesten DevTools-Features zu erhalten, laden Sie eine Insider Preview-Version 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. Siehe Microsoft Edge Insider Channels.

Die neuesten Ankündigungen finden Sie, wenn Sie dem Microsoft Edge-Team auf Twitter folgen. Wenn Sie ein Problem mit DevTools melden oder nach einem neuen Feature fragen möchten, melden Sie ein Problem im Repository MicrosoftEdge/DevTools.

Video: Microsoft Edge | Neuerungen in DevTools 96

Neue DevTools-Benutzeroberfläche verfügbar (in der Vorschau)

Das Microsoft Edge DevTools-Team experimentiert mit einer neuen DevTools-Benutzeroberfläche: Fokusmodus. Der Fokusmodus reduziert Ablenkungen und Unübersichtlichkeiten mit einem moderneren und vereinfachten Layout. Mit der neuen Aktivitätsleiste können Sie Ihre bevorzugten Tools in einer horizontalen oder vertikalen Symbolleiste anheften, um den Bildschirmbereich effizienter zu nutzen.

Um diese neue Benutzeroberfläche in Microsoft Edge Version 96 auszuprobieren, wählen Sie Einstellungen () >Experimentfokusmodus> aus.

Ab Microsoft Edge Version 96 wird das Kontrollkästchen des Experiments mit Fokusmodus statt Fokusmodus und DevTools-QuickInfos bezeichnet.

Diese Benutzeroberfläche befindet sich noch in der Entwicklung und kann sich in zukünftigen Versionen von Microsoft Edge ändern. Wir freuen uns auf Ihr Feedback zu dieser neuen DevTools-Benutzeroberfläche. Senden Sie uns Ihr Feedback, indem Sie @EdgeDevTools twittern. Alternativ können Sie bei aktiviertem Experiment im Fokusmodus unten auf der AktivitätsleisteHilfe () >Feedback auswählen, um das Fenster Feedback senden anzuzeigen.

Siehe auch:

• DevTools: Fokusmodus-Benutzeroberfläche im MSEdgeExplainers Repository.

Konsole kann erneut im oberen und unteren Bereich angezeigt werden

Seit Microsoft Edge Version 87 können Sie jedes Tool zwischen dem oberen und unteren Bereich verschieben, einschließlich des Konsolentools. Wir haben jedoch von Entwicklern gehört, dass das Verschieben des Konsolentools wiederholt umständlich war. Ab Microsoft Edge Version 96 wurde die Standardoberfläche für das Konsolentool wiederhergestellt, sodass Sie schnell zwischen einer Vollbildansicht der Konsole (im oberen Bereich) und einer Geteilten Ansicht (mit der Konsole im unteren Bereich) wechseln können, ohne das Konsolentool zu verschieben.

Die Konsole kann in der Schublade (jetzt Schnellansicht) am unteren Rand von DevTools zusammen mit einem anderen Tool geöffnet werden:

Wenn Konsole im oberen Bereich ausgewählt ist, wird der untere Bereich automatisch minimiert, wenn im unteren Bereich die Konsole angezeigt wurde:

Wenn Sie das Öffnen des Konsolentools nur an einem zentralen Ort zulassen möchten, können Sie das Verhalten der Konsole konfigurieren:

1. Klicken Sie auf der symbolleiste Standard oder der Drawer-Symbolleiste mit der rechten Maustaste auf die Registerkarte Konsole, und wählen Sie dann Konsole konfigurieren aus. Die Seite Einstellungen>einstellungen wird angezeigt.

2. Deaktivieren Sie im Abschnitt Konsole das Kontrollkästchen Registerkarte Konsole anzeigen in Standard Bereich und Schublade, und klicken Sie dann auf Schließen (x).

Siehe auch:

• Aktivitätsleistentools im Vergleich zu Schnellansichtstools in Info zur Liste der Tools
• Verschieben von Tools zwischen dem oberen und unteren Bereich in Neuerungen in DevTools (Microsoft Edge 87).

Microsoft Edge DevTools Visual Studio Code-Erweiterung

Allgemeine Informationen zu dieser Erweiterung finden Sie unter Microsoft Edge DevTools-Erweiterung für Visual Studio Code.

Anzeigen Ihres Webprojekts im Editor und Simulieren verschiedener Geräte

Die Erweiterung Microsoft Edge DevTools für Visual Studio Code bietet jetzt einen andockbaren Screencast und eine Geräteemulation:

Sie können Ihr Webprojekt auf einer dedizierten Registerkarte in Visual Studio Code anzeigen und verschiedene Geräte simulieren:

Ausführliche Informationen zur Geräteemulation finden Sie unter Geräte- und Zustandsemulation.

Live,Inline-Problemberichterstattung

Die Erweiterung bietet jetzt auch Live-Inline-Problemberichterstattung. Anstatt probleme in einem separaten Tool zu ermitteln, hebt Visual Studio Code die Probleme im Quellcode hervor und meldet sie live, während Sie Ihren Code eingeben:

Weitere Informationen finden Sie unter Inline- und Live-Problemanalyse.

Das Quellentool benachrichtigt Sie jetzt, wenn Sourcemaps nicht geladen werden können.

In Microsoft Edge Version 96 bietet das Tool Quellen jetzt mehrere Hinweise auf der Benutzeroberfläche, wenn DevTools Ihre Sourcemaps nicht laden kann. Auf der Registerkarte Seite im Bereich Navigator im Quellentool verfügen Dateien, für die DevTools sourcemaps nicht laden können, anstelle des Dateisymbols über ein Warnsymbol.

Wenn Sie eine Datei mit dem Warnsymbol auswählen, wird die Datei im Tool Quellen mit einer Infoleiste geöffnet, die angibt, dass DevTools die Sourcemap entweder nicht ordnungsgemäß vom Server abrufen oder die Sourcemap nicht richtig analysieren konnte:

Auf der Infoleiste können Sie mehr über das Problem erfahren, indem Sie die Schaltfläche In Problemen öffnen auswählen. Das Tool "Probleme" wird dann im Drawer (jetzt Bereich "Schnellansicht ") am unteren Rand von DevTools geöffnet und enthält Informationen zum Beheben des Problems und zum ordnungsgemäßen Laden Ihrer Sourcemap in DevTools:

Um zu verhindern, dass die Infoleiste zu Quellzuordnungen das Tool Quellen überladen, wählen Sie die Schaltfläche Nicht mehr anzeigen aus. Um zu verhindern, dass Probleme im Zusammenhang mit Sourcemaps das Problemtool überladen, deaktivieren Sie das Kontrollkästchen Probleme von Drittanbietern einschließen im Problemtool .

Siehe auch:

• Zuordnen des verarbeiteten Codes zu Ihrem ursprünglichen Quellcode zum Debuggen

Das Öffnen von Quelldateien in Visual Studio Code lässt sich jetzt besser in das Quellentool integrieren.

In früheren Versionen von Microsoft Edge hatte das Aktivieren der Open Source-Dateien im Visual Studio Code-Experiment unerwartetes Verhalten, als Sie bereits das Tool Quellen in DevTools verwendet hatten. Das Festlegen von Haltepunkten würde Sie zu Visual Studio Code oder zur Dokumentation leiten, um das Experiment ordnungsgemäß zu konfigurieren.

In Microsoft Edge Version 96 lässt sich das Open-Source-Dateien-Experiment in Visual Studio Code jetzt besser in das Quellentool integrieren.

• Wenn das Tool Quellen geöffnet ist und Sie dann das Experiment Open Source-Dateien im Visual Studio Code-Experiment aktivieren, wird durch Festlegen von Haltepunkten oder Öffnen von Dateien jetzt das Tool Quellen geöffnet, anstatt Sie zu Visual Studio Code oder zur Dokumentation weiterzuleiten, um das Experiment ordnungsgemäß zu konfigurieren.

  

• Wie bei früheren Versionen von Microsoft Edge wird die Datei in Visual Studio Code geöffnet, wenn das Quellentool nicht in DevTools geöffnet ist und Sie dann das Experiment Open Source-Dateien in Visual Studio Code aktivieren, indem Breakpoints festgelegt oder Dateien aus anderen Tools als dem Tool Quellen geöffnet werden.

Siehe auch:

• Öffnen von Quelldateien in Visual Studio Code : Integration von DevTools in Visual Studio Code

Wenn Sie auf der DevTools-Benutzeroberfläche das Dropdowndreiecksymbol auswählen, wird nun das Menü geöffnet.

In früheren Versionen von Microsoft Edge DevTools wurde beim Auswählen des Dreieckssymbols neben einem Dropdownmenü das Dropdownmenü nicht angezeigt. Um das Dropdownmenü zu öffnen, mussten Sie auf das aktuell ausgewählte Menüelement links neben dem Dreieckssymbol klicken, z. B. Keine Drosselung:

In Microsoft Edge Version 96 wurde dieses Problem behoben. Wenn Sie das Dreieckssymbol für ein beliebiges Dropdownmenü in DevTools auswählen, wird nun das Dropdownmenü geöffnet:

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 ursprüngliche Seite für Ankündigungen aus dem Chromium Projekt ist What's New in DevTools (Chrome 96) und wird von Jecelyn Yeen geschrieben.

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