Neuerungen in den Entwicklertools (Chrome 80)

Kayce Basques

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

Die Console unterstützt jetzt die Neudeklaration von let- und class-Anweisungen. Ein häufiges Ärgernis für Webentwickler, die die Console verwenden, um mit neuem JavaScript-Code zu experimentieren, dass sie nicht neu deklariert werden können.

Bisher hat die Console beim Neudeklarieren einer lokalen Variablen mit let einen Fehler ausgegeben:

Screenshot der Console in Chrome 78, der zeigt, dass die „Let-Rededeklaration“ fehlschlägt.

Jetzt lässt die Console die erneute Deklaration zu:

Ein Screenshot der Console in Chrome 80, auf dem zu sehen ist, dass die „let“-Deklaration erfolgreich ist.

Chromium-Problem #1004193

Verbessertes WebAssembly-Debugging

Die Entwicklertools unterstützen jetzt den DWARF Debugging Standard. Dies bedeutet eine verbesserte Unterstützung für Code-Steps, zum Festlegen von Haltepunkten und zum Auflösen von Stacktraces in Ihren Ausgangssprachen in den Entwicklertools. Den vollständigen Artikel finden Sie unter Verbessertes WebAssembly-Debugging in den Chrome-Entwicklertools.

Ein Screenshot des neuen DWARF-gestützten WebAssembly-Debuggings.

Aktualisierungen des Netzwerkbereichs

Initiatorketten auf dem Tab „Initiator“ anfordern

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

Screenshot einer Anfrageinitiatorkette 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 zugehörige Request Initiator Chain anzusehen:

  • Die überprüfte Ressource ist fett formatiert. Im Screenshot oben ist https://web.dev/default-627898b5.js die geprüfte Ressource.
  • Die Ressourcen über der geprüften Ressource sind die Initiatoren. Im Screenshot oben 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 untersuchten Ressource sind die Abhängigkeiten. Im Screenshot oben 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

Ausgewählte Netzwerkanfrage in der Übersicht hervorheben

Nachdem Sie auf eine Netzwerkressource geklickt haben, um sie zu prüfen, wird sie im Bereich "Netzwerk" in der Übersicht blau umrandet. So können Sie leichter feststellen, ob die Netzwerkanfrage früher oder später als erwartet erfolgt.

Screenshot des Übersichtsbereichs, in dem die geprüfte Ressource hervorgehoben ist

Chromium-Problem #988253

URL- und Pfadspalten im Steuerfeld „Netzwerk“

Verwenden Sie die neuen Spalten Pfad und URL im Bereich Netzwerk, um den absoluten Pfad oder die vollständige URL jeder Netzwerkressource zu sehen.

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

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

Chromium-Problem #993366

Aktualisierte User-Agent-Strings

Die Entwicklertools unterstützen das Festlegen eines benutzerdefinierten User-Agent-Strings über den Tab Netzwerkbedingungen. Der User-Agent-String wirkt sich auf den an Netzwerkressourcen angehängten HTTP-Header User-Agent sowie auf den Wert von navigator.userAgent aus.

Die vordefinierten User-Agent-Strings wurden aktualisiert, um sie an die aktuellen Browserversionen anzupassen.

Screenshot des Menüs „User-Agent“ auf dem Tab „Network Conditions“ (Netzwerkbedingungen).

Für den Zugriff auf Netzwerkbedingungen öffnen Sie das Befehlsmenü und führen den Befehl Show Network Conditions aus.

Chromium-Problem #1029031

Neuerungen im Bereich „Audits“

Neue Konfigurations-UI

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

Die neue Konfigurations-UI.

Neuerungen auf dem Tab „Abdeckung“

Modi für die Abdeckung pro Funktion oder Block

Auf dem Tab Abdeckung gibt es ein neues Drop-down-Menü, in dem Sie festlegen können, ob die Codeabdeckungsdaten pro Funktion oder pro Block erfasst werden sollen. Die Abdeckung pro Block ist detaillierter, aber auch weitaus teurer in der Erfassung. Die Entwicklertools verwenden jetzt standardmäßig die Abdeckung pro Funktion.

Drop-down-Menü für den Abdeckungsmodus

Die Abdeckung muss jetzt durch eine Seitenaktualisierung initiiert werden

Das Wechseln der Codeabdeckung ohne Seitenaktualisierung 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

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome Erste Schritte

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde abgebrochen.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59