Neuerungen in den Entwicklertools (Chrome 66)

Kayce Basques

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

• Script im Bereich Netzwerk ignorieren
• Zoomen im Gerätemodus automatisch anpassen
• Fotodruck auf den Tabs Vorschau und Antwort
• Vorschau von HTML-Inhalten auf dem Tab Vorschau
• Lokale Überschreibungen mit Stilen innerhalb von HTML

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

Skript im Netzwerkbereich ignorieren

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

Wenn Ihr Framework Netzwerkanfragen bisher in einem Wrapper umschlossen hat, wurde die Spalte Initiator wäre das nicht hilfreich. Alle Netzwerkanfragen führten auf dieselbe Zeile mit Wrapper-Code.

In diesem Szenario sollten Sie wirklich den Anwendungscode sehen, der die Anfrage verursacht. Das sind jetzt möglich:

1. Bewegen Sie den Mauszeiger auf die Spalte Initiator. Der Aufrufstack, der die Anfrage ausgelöst hat, wird in einem Pop-up-Fenster angezeigt.
2. Klicken Sie mit der rechten Maustaste auf den Anruf, den Sie aus den Ergebnissen des Initiators ausblenden möchten.
3. Wählen Sie Skript zur Ignorieren-Liste hinzufügen aus. In der Spalte Initiator werden jetzt alle Aufrufe des Skripts ausgeblendet, die Sie ignoriert haben.

Abbildung 1. requests.js wird ignoriert

Sie können ignorierte Skripts in den Einstellungen auf dem Tab Ignorieren-Liste verwalten.

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

Quelltextformatierung in den Tabs "Vorschau" und "Antwort"

Auf dem Tab Vorschau im Steuerfeld Netzwerk werden Ressourcen jetzt standardmäßig optimiert, wenn erkannt wird, dass diese Ressourcen reduziert wurden.

Abbildung 2. Auf dem Tab Vorschau wird der Inhalt von analytics.js standardmäßig im Klartext dargestellt.

Die nicht komprimierte Version einer Ressource finden Sie auf dem Tab Antwort. Sie können auch manuell Über die Schaltfläche Format können Sie die Ressourcen auf dem Tab Response (Antwort) übersichtlicher gestalten.

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

Vorschau von HTML-Inhalten auf dem Tab „Vorschau“

Bisher wurde im Bereich Netzwerk auf dem Tab Vorschau der Code einer HTML-Ressource in in bestimmten Situationen, während in anderen eine Vorschau des HTML-Codes gerendert wird. Der Tab Vorschau wird jetzt immer ein grundlegendes HTML-Rendering. Er ist nicht für die Nutzung eines vollwertigen Browsers vorgesehen. Daher wird er möglicherweise nicht angezeigt, HTML genau so, 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.

Abbildung 4. HTML-Vorschau auf dem Tab Vorschau

Zoomen im Gerätemodus automatisch anpassen

Öffnen Sie im Gerätemodus das Drop-down-Menü Zoom und wählen Sie Zoom automatisch anpassen aus. Die Größe des Darstellungsbereichs wird automatisch angepasst, wenn Sie die Geräteausrichtung ändern.

Lokale Überschreibungen funktionieren jetzt mit einigen in HTML definierten Stilen

Als die Entwicklertools lokale Überschreibungen in Chrome 65 eingeführt haben, bestand eine Einschränkung darin, Änderungen an den in HTML definierten Stilen konnten nicht erfasst werden. In Abbildung 7 gibt es beispielsweise einen Stil, in der head des Dokuments, 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 Bereich Stil der Entwicklertools geändert haben, gilt Folgendes: Lokal Bei Überschreibungen wird die Änderung nicht erfasst. Mit anderen Worten, der Stil wird bei der nächsten Aktualisierung Zurück zu font-weight: bold. In Chrome 66 bleiben solche Änderungen jetzt beim Seitenaufbau erhalten.

Bonustipp: Ignorieren Sie Framework-Skripts, um Event-Listener-Breakpoints nützlicher zu machen.

Als ich das Video Get Started With Debugging JavaScript (Erste Schritte mit der JavaScript-Fehlerbehebung) erstellt habe, haben einige Betrachter kommentiert Event-Listener-Haltepunkte sind nicht nützlich für Apps, die auf Frameworks basieren, da das Ereignis Listener sind oft in Framework-Code eingebunden. In Abbildung 8 habe ich zum Beispiel ein click Haltepunkt in den Entwicklertools. Wenn ich in der Demo auf die Schaltfläche klicke, pausiert die Entwicklertools im Menü in der ersten Zeile des Listener-Codes. In diesem Fall pausiert sie im Vue.js-Wrapper-Code in Zeile 1802, wodurch ist das nicht hilfreich.

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

Da sich das Vue.js-Skript in einer separaten Datei befindet, kann ich dieses Skript aus dem Aufrufstapel ignorieren. um diesen click-Haltepunkt zu optimieren.

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

Wenn ich das nächste Mal auf die Schaltfläche klicke und den Haltepunkt click auslöst, wird der Vue.js-Code ausgeführt. und dann in der ersten Codezeile im Listener meiner App anhält. bei dem ich immer innehalten wollte.

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

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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 > 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