Neuerungen in den Entwicklertools (Chrome 66)

Kayce Basques

Zu den neuen Funktionen und wichtigen Änderungen in den DevTools in Chrome 66 gehören:

Lies weiter oder sieh dir die Videoversion der Release Notes unten an.

Script im Netzwerkbereich ignorieren

In der Spalte Initiator im Bereich Netzwerk sehen Sie, warum eine Ressource angefordert wurde. Wenn beispielsweise ein JavaScript-Code dazu führt, dass ein Bild abgerufen wird, wird in der Spalte Initiator die Zeile mit dem JavaScript-Code angezeigt, die die Anfrage verursacht hat.

Wenn Ihr Framework bisher Netzwerkanfragen in einen Wrapper gewickelt hat, war die Spalte Initiator nicht sehr hilfreich. Alle Netzwerkanfragen verwiesen auf dieselbe Zeile des Wrapper-Codes.

In diesem Fall möchten Sie jedoch den Anwendungscode sehen, der die Anfrage verursacht. Das ist jetzt möglich:

  1. Bewegen Sie den Mauszeiger auf die Spalte Initiator. Der Aufrufstack, der die Anfrage verursacht hat, wird in einem Pop-up angezeigt.
  2. Klicken Sie mit der rechten Maustaste auf den Anruf, den Sie aus den Ergebnissen für den Initiator ausblenden möchten.
  3. Wählen Sie Script zur Ignorierliste hinzufügen aus. In der Spalte Initiator werden jetzt alle Aufrufe aus dem Script ausgeblendet, die Sie ignoriert haben.

„requests.js“ wird ignoriert.

Abbildung 1. requests.js wird ignoriert

Sie können Ihre ignorierten Scripts auf dem Tab Ignorierliste in den Einstellungen verwalten.

Weitere Informationen zum Ignorieren von Scripts finden Sie unter Scripts oder Scriptmuster ignorieren.

Formatierte Ausgabe auf den Tabs „Vorschau“ und „Antwort“

Auf dem Tab Vorschau im Bereich Netzwerk werden Ressourcen jetzt standardmäßig im Pretty-Print-Format angezeigt, wenn erkannt wird, dass sie minimiert wurden.

Auf dem Tab „Vorschau“ wird der Inhalt von analytics.js standardmäßig in einer lesbaren Form dargestellt.

Abbildung 2. Auf dem Tab Vorschau wird der Inhalt von analytics.js standardmäßig in einer lesbaren Formatierung angezeigt.

Die nicht minimierte Version einer Ressource finden Sie auf dem Tab Antwort. Sie können Ressourcen auch manuell auf dem Tab Antwort über die neue Schaltfläche Formatieren im Pretty-Print-Format anzeigen lassen.

Sie können den Inhalt von analytics.js manuell über die Schaltfläche „Formatieren“ in einer lesbaren Form anzeigen lassen.

Abbildung 3. Inhalt von analytics.js manuell über die Schaltfläche Formatieren schön formatieren

HTML-Inhalte auf dem Tab „Vorschau“ ansehen

Bisher wurde auf dem Tab Vorschau im Bereich Netzwerk in bestimmten Situationen der Code einer HTML-Ressource und in anderen eine Vorschau der HTML-Datei angezeigt. Auf dem Tab Vorschau wird jetzt immer ein einfaches Rendering der HTML-Datei durchgeführt. Es ist kein vollwertiger Browser und zeigt HTML möglicherweise nicht genau so an, wie Sie es erwarten. Wenn Sie den HTML-Code sehen möchten, klicken Sie auf den Tab Antwort oder klicken Sie mit der rechten Maustaste auf eine Ressource und wählen Sie Im Bereich „Quellen“ öffnen aus.

HTML-Vorschau auf dem Tab „Vorschau“

Abbildung 4. HTML-Vorschau auf dem Tab Vorschau

Zoom im Gerätemodus automatisch anpassen

Wenn Sie sich im Gerätemodus befinden, öffnen Sie das Drop-down-Menü Zoom und wählen Sie Zoom automatisch anpassen aus, um die Größe des Darstellungsbereichs automatisch zu ändern, wenn Sie die Geräteausrichtung ändern.

Lokale Überschreibungen funktionieren jetzt mit einigen in HTML definierten Stilen

Als in Chrome 65 die lokalen Überschreibungen in den DevTools eingeführt wurden, konnten damit keine Änderungen an in HTML definierten Stilen erfasst werden. In Abbildung 7 gibt es beispielsweise in der head des Dokuments eine Stilregel, die font-weight: bold für h1-Elemente deklariert.

Beispiel für in HTML definierte Stile

Abbildung 5. Beispiel für in HTML definierte Stile

Wenn Sie in Chrome 65 die font-weight-Deklaration über den Bereich Style in den DevTools geändert haben, wurde die Änderung nicht unter LocalOverrides erfasst. Beim nächsten Laden würde der Stil also wieder zu font-weight: bold zurückkehren. In Chrome 66 bleiben solche Änderungen jedoch bei jedem Seitenaufbau erhalten.

Bonustipp: Framework-Scripts ignorieren, um Event-Listener-Haltepunkte nützlicher zu machen

Als ich das Video Einstieg in das JavaScript-Debugging erstellt habe, haben einige Zuschauer kommentiert, dass Ereignis-Listener-Bruchstellen für auf Frameworks basierende Apps nicht nützlich sind, da die Ereignis-Listener oft in Framework-Code eingekapselt sind. In Abbildung 8 habe ich beispielsweise einen click-Unterbrechungspunkt in den DevTools eingerichtet. Wenn ich in der Demo auf die Schaltfläche klicke, wird DevTools automatisch in der ersten Zeile des Listener-Codes angehalten. In diesem Fall wird in Zeile 1802 des Wrapper-Codes von Vue.js angehalten, was nicht sehr hilfreich ist.

Der Klick-Haltepunkt wird im Wrapper-Code von Vue.js pausiert.

Abbildung 6. Der Haltepunkt click pausiert im Wrapper-Code von Vue.js

Da sich das Vue.js-Script in einer separaten Datei befindet, kann ich es im Bereich Call Stack ignorieren, um diesen click-Bruchpunkt nützlicher zu machen.

Ignorieren Sie das Vue.js-Script im Bereich „Call Stack“.

Abbildung 7. Ignorieren des Vue.js-Scripts im Bereich Aufrufstack

Wenn ich das nächste Mal auf die Schaltfläche klicke und den Haltepunkt click auslöse, wird der Vue.js-Code ohne Pause ausgeführt und dann an der ersten Codezeile im Listener meiner App angehalten, wo ich eigentlich schon immer anhalten wollte.

Der Klick-Haltepunkt pausiert jetzt beim Listener-Code der App.

Abbildung 8. Der Haltepunkt click hält die Ausführung jetzt am Listener-Code der App an.

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.