Neuerungen in den Entwicklertools (Chrome 80)

Kayce Basques

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

Die Console unterstützt jetzt neue Deklarationen von let- und class-Anweisungen. Es war ein häufiges Problem für Webentwickler, die die Console zum Experimentieren mit neuem JavaScript-Code verwenden.

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

Ein Screenshot der Konsole in Chrome 78, auf dem zu sehen ist, dass die Neudeklaration „Zulassen“ fehlschlägt.

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

Ein Screenshot der Console in Chrome 80, auf dem zu sehen ist, dass die Neudeklaration erfolgreich war.

Chromium-Problem #1004193

Verbessertes WebAssembly-Debugging

In den Entwicklertools wird jetzt der DWARF Debugging Standard unterstützt. Das bedeutet, dass in den Entwicklertools in den Entwicklertools in Ihren Quellsprachen mehr Unterstützung für das Überschreiten von Code, das Festlegen von Haltepunkten und das Auflösen von Stacktraces erforderlich ist. Weitere Informationen finden Sie unter Verbessertes WebAssembly-Debugging in den Chrome-Entwicklertools.

Screenshot des neuen DWARF-gestützten WebAssembly-Debugging.

Updates 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 nachvollziehen, warum eine Ressource angefordert wurde oder welche Netzwerkaktivität eine bestimmte Ressource (z. B. ein Script) ausgelöst hat.

Screenshot einer Anfrageinitiatorkette auf dem Tab „Initiator“

Klicken Sie nach dem Logging der Netzwerkaktivität im Netzwerkbereich auf eine Ressource und wechseln Sie dann zum Tab Initiator, um die zugehörige Anfrageinitiatorkette anzusehen:

  • Die geprü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 unterhalb der geprüften 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 markieren

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

Screenshot des Bereichs „Übersicht“, in dem die geprüfte Ressource markiert ist

Chromium-Problem #988253

Die Spalten "URL" und "Pfad" 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 „Pfad“ und „URL“ im Bereich „Netzwerk“

Klicken Sie mit der rechten Maustaste auf die Kopfzeile der Tabelle Wasserfall und wählen Sie Pfad oder URL aus, um sich die neuen Spalten anzeigen zu lassen.

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 HTTP-Header User-Agent aus, der an Netzwerkressourcen angehängt ist, und auch auf den Wert von navigator.userAgent.

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

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

Um auf Netzwerkbedingungen zuzugreifen, öffnen Sie das Befehlsmenü und führen Sie den Befehl Show Network Conditions aus.

Chromium-Problem #1029031

Aktualisierungen des Audit-Bereichs

Neue Konfigurations-UI

Die Konfigurations-UI hat ein neues responsives Design und die Konfigurationsoptionen zur Drosselung wurden vereinfacht. Weitere Informationen zur Drosselung von UI-Änderungen finden Sie unter Drosselung des Bereichs „Audits“.

Die neue Konfigurations-UI

Neuerungen beim Tab „Abdeckung“

Abdeckung pro Funktion oder pro Block

Auf dem Tab Abdeckung befindet sich ein neues Drop-down-Menü, in dem Sie angeben 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. In den Entwicklertools wird jetzt standardmäßig die Abdeckung pro Funktion verwendet.

Drop-down-Menü für Abdeckungsmodus

Die Abdeckung muss jetzt durch eine Seitenaktualisierung initiiert werden

Das Ein-/Ausschalten der Codeabdeckung ohne erneutes Laden der Seite wurde entfernt, da die Abdeckungsdaten unzuverlässig waren. Eine Funktion kann beispielsweise als nicht verwendet gemeldet werden, wenn ihre Ausführung vor längerer Zeit zurückliegt und die automatische Speicherbereinigung von V8 sie bereinigt hat.

Chromium-Problem #1004203

Vorschaukanäle herunterladen

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

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 101

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 gekündigt.

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