Neuerungen in den Entwicklertools (Chrome 80)

Kayce Basques
Kayce Basques
X GitHub

Unterstützung für let- und class-Neudeklarationen in der Console

Die Console unterstützt jetzt die erneute Deklaration von let- und class-Anweisungen. Die Unfähigkeit zur erneuten Deklaration war ein häufiges Ärgernis für Webentwickler, die die Konsole zum Experimentieren mit neuem JavaScript-Code verwenden.

Wenn Sie beispielsweise zuvor eine lokale Variable mit let neu deklariert haben, wurde in der Console ein Fehler ausgegeben:

Ein Screenshot der Console in Chrome 78, der zeigt, dass die Neudeklaration von „let“ fehlschlägt.

In der Console ist die erneute Deklaration jetzt möglich:

Screenshot der Console in Chrome 80, auf dem zu sehen ist, dass die Neudeklaration von „let“ erfolgreich ist.

Chromium-Problem #1004193

Verbesserte WebAssembly-Fehlerbehebung

DevTools unterstützt jetzt den DWARF-Debuggingstandard. Das bedeutet, dass Sie in Ihren Quellsprachen in DevTools Code durchgehen, Breakpoints festlegen und Stacktraces auflösen können. Weitere Informationen finden Sie unter Improved WebAssembly debugging in Chrome DevTools.

Ein Screenshot des neuen DWARF-basierten WebAssembly-Debuggings.

Aktualisierungen im Netzwerkbereich

Initiatorenketten auf dem Tab „Initiator“ anfordern

Sie können jetzt die Initiatoren und Abhängigkeiten einer Netzwerkanfrage als verschachtelte Liste ansehen. So können Sie nachvollziehen, warum eine Ressource angefordert wurde oder welche Netzwerkaktivität durch eine bestimmte Ressource (z. B. ein Skript) verursacht wurde.

Screenshot einer Initiatorenkette auf dem Tab „Initiator“

Nachdem Sie Netzwerkaktivitäten im Bereich „Netzwerk“ protokolliert haben, klicken Sie auf eine Ressource und rufen Sie dann den Tab Initiator auf, um die Kette der Anforderungsinitiatoren anzusehen:

  • Die geprüfte Ressource ist fett formatiert. Im obigen Screenshot ist https://web.dev/default-627898b5.js die geprüfte Ressource.
  • Die Ressourcen über der geprüften Ressource sind die Initiatoren. Im obigen Screenshot ist https://web.dev/bootstrap.js der Initiator von https://web.dev/default-627898b5.js. Anders ausgedrückt: https://web.dev/bootstrap.js hat die Netzwerkanfrage für https://web.dev/default-627898b5.js ausgelöst.
  • Die Ressourcen unter der geprüften Ressource sind die Abhängigkeiten. Im obigen Screenshot ist https://web.dev/chunk-f34f99f7.js eine Abhängigkeit von https://web.dev/default-627898b5.js. Mit anderen Worten: https://web.dev/default-627898b5.js hat die Netzwerkanfrage für https://web.dev/chunk-f34f99f7.js ausgelöst.

Chromium-Problem #842488

Die ausgewählte Netzwerkanfrage in der Übersicht hervorheben

Wenn Sie auf eine Netzwerkressource klicken, um sie zu untersuchen, wird im Bereich „Netzwerk“ jetzt ein blauer Rahmen um diese Ressource in der Übersicht angezeigt. So können Sie feststellen, ob die Netzwerkanfrage früher oder später als erwartet erfolgt.

Ein Screenshot des Übersichtsbereichs, in dem die untersuchte Ressource hervorgehoben ist.

Chromium-Problem #988253

Spalten „URL“ und „Pfad“ im Netzwerkbereich

Mit den neuen Spalten Pfad und URL im Bereich Netzwerk können Sie den absoluten Pfad oder die vollständige URL jeder Netzwerkressource sehen.

Screenshot der neuen Spalten „Pfad“ und „URL“ im Bereich „Netzwerk“.

Klicken Sie mit der rechten Maustaste auf die Tabellenüberschrift Wasserfalldiagramm und wählen Sie Pfad oder URL aus, um die neuen Spalten einzublenden.

Chromium-Problem #993366

Aktualisierte User-Agent-Strings

In den Entwicklertools kann über den Tab Netzwerkbedingungen ein benutzerdefinierter User-Agent-String festgelegt werden. Der User-Agent-String wirkt sich auf den User-Agent-HTTP-Header aus, der an Netzwerkressourcen angehängt wird, sowie auf den Wert von navigator.userAgent.

Die vordefinierten User-Agent-Strings wurden aktualisiert, um moderne Browserversionen widerzuspiegeln.

Screenshot des Menüs „User Agent“ auf dem Tab „Network Conditions“

Netzwerkbedingungen können Sie aufrufen, indem Sie das Befehlsmenü öffnen und den Befehl Show Network Conditions ausführen.

Chromium-Problem #1029031

Aktualisierungen des Bereichs „Prüfungen“

Neue Konfigurations-UI

Die Konfigurations-UI hat ein neues, responsives Design und die Optionen für die Drosselungskonfiguration wurden vereinfacht. Weitere Informationen zu den Änderungen an der Benutzeroberfläche für die Drosselung finden Sie unter Drosselung im Bereich „Prüfungen“.

Die neue Konfigurations-UI.

Aktualisierungen des Tabs „Abdeckung“

Abdeckungsmodi pro Funktion oder pro Block

Auf dem Tab „Abdeckung“ gibt es ein neues Drop-down-Menü, in dem Sie angeben können, ob Daten zur Codeabdeckung pro Funktion oder pro Block erfasst werden sollen. Die Abdeckung pro Block ist detaillierter, aber auch viel teurer zu erfassen. In den Entwicklertools wird jetzt standardmäßig die Abdeckung pro Funktion verwendet.

Drop-down-Menü „Abdeckungsmodus“

Die Abdeckung muss jetzt durch ein Neuladen der Seite initiiert werden.

Das Umschalten der Codeabdeckung ohne Neuladen der Seite wurde entfernt, da die Abdeckungsdaten unzuverlässig waren. Eine Funktion kann beispielsweise als nicht verwendet gemeldet werden, wenn ihre Ausführung lange zurückliegt und der Garbage Collector von V8 sie bereinigt hat.

Chromium-Problem #1004203

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.