Neuerungen in den Entwicklertools (Chrome 66)

Kayce Basques

Zu den neuen Funktionen und wichtigen Änderungen, die in Chrome 66 in den Entwicklertools eingeführt werden, gehören:

• Skript im Netzwerkbereich ignorieren
• Zoom im Gerätemodus automatisch anpassen
• Formatierung auf den Tabs Vorschau und Antwort
• HTML-Inhalte auf dem Tab Vorschau ansehen
• Lokale Überschreibungen mit Stilen im HTML-Code

Lesen Sie weiter oder sehen Sie sich die Videoversion der Versionshinweise unten an.

Script im Netzwerkbereich ignorieren

In der Spalte Initiator im Bereich Netzwerk sehen Sie, warum eine Ressource angefordert wurde. Wenn beispielsweise durch JavaScript ein Bild abgerufen wird, sehen Sie in der Spalte Initiator die Zeile des JavaScript-Codes, die die Anfrage ausgelöst hat.

Wenn Ihr Framework Netzwerk-Anfragen in einem Wrapper umschloss, war die Spalte Initiator bisher nicht sehr hilfreich. Alle Netzwerkanfragen verwiesen auf dieselbe Zeile des Wrapper-Codes.

In diesem Fall möchten Sie 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-Fenster angezeigt.
2. Klicken Sie mit der rechten Maustaste auf den Anruf, den Sie in 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.

Abbildung 1. requests.js wird ignoriert

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

Weitere Informationen zum Ignorieren von Skripts finden Sie unter Skript oder Skriptmuster ignorieren.

Formatierung auf den Tabs „Vorschau“ und „Antwort“

Auf dem Tab Vorschau im Bereich Netzwerk werden Ressourcen jetzt standardmäßig formatiert, wenn erkannt wird, dass sie minimiert wurden.

Abbildung 2. Auf dem Tab Vorschau wird der Inhalt von analytics.js standardmäßig formatiert angezeigt.

Wenn Sie die nicht minimierte Version einer Ressource aufrufen möchten, verwenden Sie den Tab Antwort. Sie können Ressourcen auch manuell über die neue Schaltfläche Formatieren auf dem Tab Antwort formatieren.

Abbildung 3. Manuelles Formatieren des Inhalts von analytics.js über die Schaltfläche Formatieren

Vorschau von HTML-Inhalten auf dem Tab „Vorschau“

Bisher wurde auf dem Tab Vorschau im Bereich Netzwerk in bestimmten Situationen der Code einer HTML-Ressource angezeigt, in anderen Fällen wurde eine Vorschau des HTML gerendert. Auf dem Tab Vorschau wird jetzt immer eine einfache Darstellung des HTML-Codes angezeigt. Es ist nicht als vollständiger Browser gedacht und zeigt HTML möglicherweise nicht wie erwartet an. 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 Quellenbereich öffnen aus.

Abbildung 4. HTML-Vorschau auf dem Tab Vorschau

Zoom im Gerätemodus automatisch anpassen

Öffnen Sie im Gerätemodus das Drop-down-Menü Zoom und wählen Sie Zoom automatisch anpassen aus, um die Größe des Ansichtsbereichs automatisch anzupassen, wenn Sie die Ausrichtung des Geräts ändern.

Lokale Überschreibungen funktionieren jetzt mit einigen in HTML definierten Stilen

Als die lokalen Überschreibungen in Chrome 65 eingeführt wurden, gab es eine Einschränkung: Änderungen an Stilen, die in HTML definiert sind, konnten nicht nachverfolgt werden. In Abbildung 7 ist beispielsweise eine Stilregel im head des Dokuments zu sehen, die font-weight: bold für h1-Elemente deklariert.

Abbildung 5. Beispiel für in HTML definierte Stile

Wenn Sie in Chrome 65 die font-weight-Deklaration über den DevTools-Bereich Style geändert haben, wurde die Änderung nicht von Local Overrides erfasst. Beim nächsten Neuladen würde der Stil also wieder auf font-weight: bold zurückgesetzt. In Chrome 66 bleiben solche Änderungen jedoch auch nach dem Laden einer Seite erhalten.

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

Als ich das Video Get Started With Debugging JavaScript (Erste Schritte beim Debuggen von JavaScript) erstellt habe, haben einige Zuschauer kommentiert, dass Breakpoints für Event-Listener für Apps, die auf Frameworks basieren, nicht nützlich sind, da die Event-Listener oft in Framework-Code eingebunden sind. In Abbildung 8 habe ich beispielsweise einen click-Haltepunkt in den Entwicklertools eingerichtet. Wenn ich in der Demo auf die Schaltfläche klicke, hält DevTools automatisch in der ersten Zeile des Listener-Codes an. In diesem Fall wird die Ausführung im Wrapper-Code von Vue.js in Zeile 1802 angehalten, was nicht sehr hilfreich ist.

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

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

Abbildung 7. Vue.js-Script im Bereich Aufrufstack ignorieren

Wenn ich das nächste Mal auf die Schaltfläche klicke und den Haltepunkt click auslöse, wird der Vue.js-Code ausgeführt, ohne dass er angehalten wird. Anschließend wird die Ausführung in der ersten Codezeile des Listeners meiner App angehalten, was ich eigentlich von Anfang an wollte.

Abbildung 8. Der Haltepunkt click wird jetzt im Listener-Code der App pausiert.

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.