Neuerungen in den Entwicklertools (Chrome 80)

Kayce Basques

Unterstützung für erneute Deklarationen von let und class in der Console

Die Console unterstützt jetzt die erneute Deklaration von let- und class-Anweisungen. Die fehlende Möglichkeit zur Neudeklarierung war für Webentwickler, die in der Console mit neuem JavaScript-Code experimentieren, ein häufiges Ärgernis.

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 erneute Deklaration von „let“ fehlschlägt.

In der Console ist jetzt die Neudeklarierung möglich:

Screenshot der Console in Chrome 80, der zeigt, dass die erneute Deklaration von „let“ erfolgreich war

Chromium-Problem #1004193

Verbesserte WebAssembly-Fehlerbehebung

In DevTools wird jetzt der DWARF-Debugging-Standard unterstützt. Das bedeutet, dass Sie Code überspringen, Haltestellen setzen und Stack-Traces in Ihren Quellsprachen in DevTools besser auflösen können. Weitere Informationen finden Sie unter Verbessertes WebAssembly-Debugging in den Chrome DevTools.

Ein Screenshot des neuen DWARF-basierten WebAssembly-Debuggings.

Aktualisierungen des Netzwerkbereichs

Initiatorenketten auf dem Tab „Initiator“ anfordern

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

Screenshot einer Initiatorenkette für Anfragen auf dem Tab „Initiator“

Nachdem Sie Netzwerkaktivitäten im Bereich „Netzwerk“ protokolliert haben, klicken Sie auf eine Ressource und rufen Sie den Tab Initiator auf, um die Anfrage-Initiator-Kette aufzurufen:

  • 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. Mit anderen Worten: https://web.dev/bootstrap.js hat die Netzwerkanfrage für https://web.dev/default-627898b5.js verursacht.
  • 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 verursacht.

Chromium-Problem #842488

Markieren Sie die ausgewählte Netzwerkanfrage in der Übersicht.

Wenn Sie auf eine Netzwerkressource klicken, um sie zu prüfen, wird diese im Bereich „Netzwerk“ in der Übersicht jetzt blau umrandet. So können Sie erkennen, ob die Netzwerkanfrage früher oder später als erwartet erfolgt.

Screenshot des Bereichs „Übersicht“ mit der geprüften Ressource

Chromium-Problem #988253

URL- und Pfadspalten im Bereich „Netzwerk“

In den neuen Spalten Pfad und URL im Bereich Netzwerk sehen Sie den absoluten Pfad oder die vollständige URL der einzelnen Netzwerkressourcen.

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

Klicken Sie mit der rechten Maustaste auf die Kopfzeile der Tabelle Abfolge und wählen Sie Pfad oder URL aus, um die neuen Spalten einzublenden.

Chromium-Problem #993366

Aktualisierte User-Agent-Strings

In den DevTools können Sie auf dem Tab Netzwerkbedingungen einen benutzerdefinierten User-Agent-String festlegen. Der User-Agent-String wirkt sich auf den User-Agent-HTTP-Header aus, der an Netzwerkressourcen angehängt ist, und auch 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 „Netzwerkbedingungen“

Wenn du auf die Netzwerkbedingungen zugreifen möchtest, öffne das Befehlsmenü und führe den Befehl Show Network Conditions aus.

Chromium-Problem #1029031

Aktualisierungen des Bereichs „Audits“

Neue Konfigurations-UI

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

Die neue Konfigurationsoberfläche

Änderungen am Tab „Abdeckung“

Abdeckungsmodi pro Funktion oder 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 erheben. In den DevTools wird jetzt standardmäßig die Abdeckung pro Funktion verwendet.

Drop-down-Menü „Abdeckungsmodus“

Die Abdeckung muss jetzt durch ein Seitenaktualisieren gestartet werden

Die Möglichkeit, die Codeabdeckung ohne Seitenaktualisierung umzuschalten, wurde entfernt, da die Abdeckungsdaten nicht zuverlässig waren. Eine Funktion kann beispielsweise als nicht verwendet gemeldet werden, wenn ihre Ausführung schon lange zurückliegt und der Garbage Collector von V8 sie beseitigt hat.

Chromium-Problem #1004203

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.