Neuerungen in den Entwicklertools (Chrome 66)

Kayce Basques

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

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. Wenn JavaScript beispielsweise bewirkt, dass ein Bild abgerufen wird, wird in der Spalte Initiator die Zeile mit dem JavaScript-Code angezeigt, der die Anfrage verursacht hat.

Wenn Ihr Framework Netzwerkanfragen in einem Wrapper umschlossen würde, war die Spalte Initiator bisher nicht so hilfreich. Alle Netzwerkanfragen führten auf dieselbe Zeile mit Wrapper-Code.

In diesem Szenario möchten Sie wirklich 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 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.

"requests.js" wird ignoriert.

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 Bereich Netzwerk werden Ressourcen jetzt standardmäßig optimiert, wenn erkannt wird, dass diese Ressourcen reduziert wurden.

Auf dem Tab „Preview“ (Vorschau) wird der Inhalt von analytics.js standardmäßig im Klardruck dargestellt.

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 Ressourcen auch manuell über die neue Schaltfläche Format auf dem Tab Response (Antwort) drucken.

Manuelles Drucken des Inhalts von analytics.js über die Schaltfläche „Format“.

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 in bestimmten Situationen der Code einer HTML-Ressource angezeigt, während in anderen Situationen eine Vorschau des HTML-Codes angezeigt wurde. Auf dem Tab Preview (Vorschau) wird jetzt immer ein grundlegendes Rendering des HTML-Codes durchgeführt. Er ist nicht für einen vollwertigen Browser vorgesehen, daher wird der HTML-Code möglicherweise nicht wie erwartet angezeigt. 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

Zoomen 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 Darstellungsbereichs automatisch anzupassen, 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, konnten Änderungen an in HTML definierten Stilen nicht nachverfolgt werden. In Abbildung 7 gibt es beispielsweise eine Stilregel in head des Dokuments, 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 Stil der Entwicklertools ändern, wird die Änderung von lokalen Überschreibungen nicht erfasst. Mit anderen Worten, bei der nächsten Aktualisierung würde der Stil wieder in font-weight: bold zurückgesetzt. 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 festgestellt, dass Haltepunkte für Event-Listener nicht nützlich für Anwendungen sind, die auf Frameworks basieren, da die Ereignis-Listener häufig in Framework-Code eingeschlossen sind. In Abbildung 8 habe ich beispielsweise einen click-Haltepunkt in den Entwicklertools eingerichtet. Wenn ich in der Demo auf die Schaltfläche klicke, pausiert die Entwicklertools automatisch in der ersten Zeile des Listener-Codes. In diesem Fall pausiert sie im Vue.js-Wrapper-Code in Zeile 1802, was nicht sehr hilfreich ist.

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

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

Da sich das Vue.js-Skript in einer separaten Datei befindet, kann ich dieses Skript im Bereich Aufrufstack ignorieren, um diesen click-Haltepunkt nützlicher zu gestalten.

Das Vue.js-Skript im Aufrufstack wird ignoriert.

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

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

Der Klick-Haltepunkt wird jetzt im Listener-Code der App angehalten.

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 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