Neuerungen in DevTools (Microsoft Edge 106)

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: Neuerungen in DevTools 106

Einführung in die Befehlspalette

Das Befehlspalettenexperiment wurde in Microsoft Edge 123 entfernt.

In Microsoft Edge 106 können Sie jetzt das Experiment Befehlspalette aktivieren und verwenden. Die Befehlspalette ermöglicht den Zugriff auf Befehle der Browserverwaltung und Entwicklertools mit nur einer Tastenkombination: STRG+UMSCHALT+LEERTASTE.

So aktivieren Sie das Befehlspalettenexperiment:

1. Gehen Sie zu edge://flags. Beginnen Sie dann im Textfeld Suchflags mit der Eingabe der Befehlspalette.

2. Wählen Sie im Dropdownmenü Befehlspalettedie Option Aktiviert aus:

   

   Beachten Sie die Tastenkombination, die im Abschnitt Befehlspalette auf der edge://flags Seite angezeigt wird.

3. Klicken Sie auf die Schaltfläche Neu starten , die unten rechts angezeigt wird, wenn Sie Aktiviert auswählen.

So greifen Sie schnell auf die verfügbaren Browserverwaltungsbefehle und DevTools-Befehle zu, nachdem Sie das Experiment aktiviert haben:

1. Drücken Sie in Microsoft Edge (mit oder ohne geöffnete DevTools ) STRG+UMSCHALT+LEERTASTE.

2. Beginnen Sie mit der Eingabe. Die Befehle werden basierend auf Ihren Eingabezeichen gefiltert und in Kategorien wie Vorschläge, Verlauf und DevTools gruppiert:

   

3. Um die Filterung so einzugrenzen, dass nur DevTools-Befehle aufgelistet werden, geben Sie das Zeichen größer als (>) ein:

   

Teilen Sie uns mit, welche Befehle Sie in zukünftigen Versionen von Microsoft Edge sehen möchten, indem Sie einen Kommentar in Issue 73: [feedback] Command Palette experiment im MicrosoftEdge/DevTools-Repository veröffentlichen!

Filtern und automatisches Beheben von Codeproblemen in DevTools für Visual Studio Code

Die Microsoft Edge DevTools-Erweiterung für Visual Studio Code bietet jetzt Optionen für schnelle Korrekturen , mit denen Sie Probleme automatisch beheben können.

So greifen Sie auf die Schnellkorrekturoptionen zu:

1. Zeigen Sie auf ein Problem, das von der DevTools-Erweiterung gemeldet wird, das durch eine wellenförmige Unterstreichung in Ihrem Code angezeigt wird. Neben dem Problem wird ein Glühbirnensymbol angezeigt.

2. Klicken Sie auf das Glühbirnensymbol( ). Das Menü Schnellkorrektur wird angezeigt:

   

3. Wählen Sie die Schnelle Problembehebung aus, die Sie verwenden möchten, um das Problem zu beheben oder die Meldung als Problem zu beenden. Wenn Sie auswählen, dass das Problem ignoriert wird, wird automatisch eine .hintrc Datei erstellt, die die Erweiterung angibt, diesen Problemtyp zu ignorieren und ihn nicht erneut zu melden.

Siehe auch:

• Automatisierte Schnelle Fehlerbehebungen und Problemfilterung in der Inline- und Live-Problemanalyse

DevTools verwendet jetzt weniger Speicherplatz beim Zwischenspeichern von Sourcemaps

Ab Microsoft Edge 101 hat DevTools damit begonnen, Sourcemaps in IndexedDB zwischenzuspeichern, um die Anzahl der Netzwerkanforderungen zu reduzieren, die Ihre Sourcemaps abrufen. Diese Änderung kann jedoch möglicherweise viel Speicherplatz belegen, wenn diese Sourcemaps nie entfernt werden.

In Microsoft Edge 106 wurde dieses Problem behoben, indem alle Sourcemaps, auf die in 30 Tagen nicht zugegriffen wurde, aus dem IndexedDB-Speicher entfernt wurden. Darüber hinaus werden sourcemaps, die von localhost bereitgestellt werden, nicht mehr zwischengespeichert. Vielen Dank für Ihr Feedback zu diesem Problem!

Um zu verstehen, wie DevTools Ihre Sourcemaps abruft und zwischenspeichert, watch die Spalte Load status im Source Maps Monitor-Tool. Wenn Sie die Webseite zum ersten Mal laden, zeigt das Tool Source Maps Monitor an, dass die Quellzuordnungen noch nicht zwischengespeichert sind:

Wenn Sie die Webseite aktualisieren, zeigt das Tool Source Maps Monitor an, dass die zwischengespeicherten Quellzuordnungen verwendet werden:

Um den IndexedDB-Cache zu löschen und DevTools das erneute Laden von Sourcemaps zu erzwingen, führen Sie im Befehlsmenü den Befehl Cache für Quellzuordnungen löschen aus. Weitere Informationen finden Sie unter Ausführen von Befehlen im Befehlsmenü.

Informationen zum Verlauf finden Sie unter Problem 89.

Siehe auch:

• Quellzuordnungen werden jetzt mit IndexedDB in Neuigkeiten in DevTools (Microsoft Edge 101) zwischengespeichert.

Chromium Farbdesigns sind veraltet.

Um die Zuverlässigkeit zu verbessern, wurden die Designs Chromium Light und Chromium Dark als veraltet gekennzeichnet. Benutzer, für die diese Designs zuvor ausgewählt wurden, werden automatisch zum Design Light+ bzw . Dark+ migriert:

Design "DevTools in Light+" :

Design "DevTools in Dark+ ":

Es stehen viele DevTools-Farbdesigns zur Auswahl, z. B. Monokai und Solarized. Um das Farbdesign in DevTools zu ändern, klicken Sie auf die Schaltfläche Einstellungen (), und wählen Sie dann auf der Seite Einstellungen im Dropdownmenü Design ein Design aus:

Verbesserungen der Barrierefreiheit im Fokusmodus und im Modus mit hohem Kontrast

Die Schaltflächen "Position andocken" und "Aktivitätsleiste" im Fokusmodus funktionieren jetzt besser mit Sprachausgaben

In Microsoft Edge 105 erhielt der Fokusmodus mehrere Verbesserungen, darunter neue Schaltflächen für die Position des Docks und der Aktivitätsleiste . In Microsoft Edge 106 funktionieren diese neuen Schaltflächen jetzt besser mit Hilfstechnologien wie Bildschirmsprachausgaben.

Sprachausgaben kündigen jetzt an, welche Schaltfläche " Position andocken " oder welche Schaltfläche "Aktivitätsleistenposition " derzeit ausgewählt ist, und die Anzahl der Schaltflächen, die die verfügbaren Standortoptionen darstellen:

Siehe auch:

• Navigieren in DevTools mit Hilfstechnologie
• Fokusmodus: Verbesserte Positionssteuerelemente für DevTools, Aktivitätsleiste und Schnellansicht in Neuigkeiten in DevTools (Microsoft Edge 105).

Berechnete Stile sind im Modus mit hohem Kontrast leichter zu erkennen

Im Modus mit hohem Kontrast wurden in früheren Versionen von Microsoft Edge die Schaltflächen zum Erweitern und Reduzieren für berechnete Formatvorlagen auf der Registerkarte Berechnet im Tool Elemente nicht ordnungsgemäß gerendert. In Microsoft Edge 106 wurde dieses Problem behoben. Die Schaltflächen zum Erweitern und Reduzieren sind jetzt im Modus mit hohem Kontrast sichtbar:

Siehe auch:

• Windows-Modus für hohen Kontrast

Ankündigungen aus dem Chromium-Projekt

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

• Gruppierung von Dateien nach Erstellt/Bereitgestellt im Bereich "Quellen"
• Verbesserte Stapelablaufverfolgungen
  • Verknüpfte Stapelablaufverfolgungen für asynchrone Vorgänge
  • Automatisches Ignorieren bekannter Drittanbieterskripts
• Verbesserte Aufrufliste während des Debuggens
• Ausblenden von ignorierten Quellen im Bereich "Quellen"
• Ausblenden von ignorierten Dateien im Befehlsmenü
• Neue Interaktionsnachverfolgung im Leistungsbereich