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. Die Unfähigkeit einer erneuten Erklärung war ein häufiges Ärgernis für Webentwickler, die die Console verwenden, um mit neuem JavaScript zu experimentieren. Code.

Wenn beispielsweise eine lokale Variable zuvor mit let neu deklariert wurde, hat die Konsole den Fehler ausgegeben. Fehler:

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

Die Entwicklertools unterstützen jetzt den DWARF Debugging Standard, was bedeutet, dass die Unterstützung für über Code iterieren, Haltepunkte setzen und Stacktraces in Ihren Ausgangssprachen in Entwicklertools. 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. Dies kann können Sie besser nachvollziehen, warum eine Ressource angefordert wurde oder welche Netzwerkaktivität eine bestimmte Ressource (z. B. als Skript) verursacht wird.

Screenshot einer Anfrageinitiatorkette auf dem Tab „Initiator“

Klicken Sie nach dem Logging der Netzwerkaktivität im Bereich „Netzwerk“ auf eine Ressource und rufen Sie die Initiator (Initiator), um die zugehörige Anfrageinitiatorkette aufzurufen:

  • Die geprüfte Ressource ist fett formatiert. Im Screenshot oben ist https://web.dev/default-627898b5.js ist die geprüfte Ressource.
  • Die Ressourcen über der geprüften Ressource sind die Initiatoren. Im Screenshot oben https://web.dev/bootstrap.js ist der Initiator von https://web.dev/default-627898b5.js. In anderen Wörter, https://web.dev/bootstrap.js hat die Netzwerkanfrage für https://web.dev/default-627898b5.js.
  • Die Ressourcen unterhalb der geprüften Ressource sind die dependencies. Im Screenshot oben https://web.dev/chunk-f34f99f7.js ist eine Abhängigkeit von https://web.dev/default-627898b5.js. In Mit anderen Worten, https://web.dev/default-627898b5.js hat die Netzwerkanfrage für https://web.dev/chunk-f34f99f7.js.

Chromium-Problem #842488

Ausgewählte Netzwerkanfrage in der Übersicht markieren

Nachdem Sie auf eine Netzwerkressource geklickt haben, um sie zu prüfen, wird im Steuerfeld „Netzwerk“ jetzt ein blauer Rahmen angezeigt. um diese Ressource in der Übersicht zu sehen. So können Sie feststellen, 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 oder vollständigen Pfad zu sehen. URL jeder Netzwerkressource.

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. Die Der User-Agent-String wirkt sich auf den HTTP-Header User-Agent aus, der an Netzwerkressourcen angehängt ist, sowie 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 Optionen für die Drosselung vereinfacht. Weitere Informationen zur Drosselung der Benutzeroberfläche finden Sie unter Drosselung des Bereichs „Audits“. Änderungen.

Die neue Konfigurations-UI

Neuerungen beim Tab „Abdeckung“

Abdeckung pro Funktion oder pro Block

Auf dem Tab Abdeckung finden Sie ein neues Drop-down-Menü, in dem Sie angeben können, ob Daten zur Codeabdeckung sollten pro Funktion oder pro Block erfasst werden. Die Abdeckung pro Block ist detaillierter, aber auch wesentlich teurer in der Beschaffung. 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 Umschalten der Codeabdeckung ohne Aktualisierung der Seite wurde entfernt, weil die Abdeckungsdaten unzuverlässig werden. Beispielsweise kann eine Funktion als nicht verwendet gemeldet werden, wenn ihre Ausführung vor längerer Zeit zurückliegt und die automatische Speicherbereinigung von V8 hat sie bereinigt.

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.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • 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