Neuerungen in den Entwicklertools (Chrome 66)

Kayce Basques

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

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

Skript im Steuerfeld „Netzwerk“ ignorieren

In der Spalte Initiator im Bereich Netzwerk sehen Sie, warum eine Ressource angefordert wurde. Wenn beispielsweise JavaScript bewirkt, dass ein Bild abgerufen wird, wird in der Spalte Initiator die JavaScript-Codezeile angezeigt, durch die die Anfrage ausgelöst wurde.

Wenn Ihr Framework Netzwerkanfragen bisher in einem Wrapper umschlossen hat, war die Spalte Initiator nicht besonders hilfreich. Alle Netzwerkanfragen verweisen auf dieselbe Zeile mit Wrapper-Code.

In diesem Szenario sollten Sie den Anwendungscode sehen, der die Anfrage auslöst. Das ist jetzt möglich:

  1. Bewegen Sie den Mauszeiger auf die Spalte Initiator (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 Initiator-Ergebnissen ausblenden möchten.
  3. Wählen Sie Script zum Ignorieren der 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 Skripts oder Muster von Skripts ignorieren.

Quelltextformatierung auf 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 „Vorschau“ wird der Inhalt von analytics.js standardmäßig optimiert.

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

Die nicht reduzierte Version einer Ressource können Sie auf dem Tab Antwort ansehen. Sie können auf dem Tab Response (Antwort) über die neue Schaltfläche Format auch manuell optimierte Ressourcen erstellen.

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

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

Vorschau von HTML-Inhalten auf der Registerkarte „Vorschau“

Bisher wurde auf dem Tab Vorschau im Bereich Netzwerk der Code einer HTML-Ressource in bestimmten Situationen angezeigt, während in anderen eine Vorschau der HTML-Ressource gerendert wurde. Auf dem Tab Vorschau wird der HTML-Code jetzt immer grundlegend gerendert. Die Funktion ist nicht als vollwertiger Browser gedacht und HTML wird daher möglicherweise nicht genau so angezeigt, 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 Feld „Quellen“ öffnen aus.

HTML-Vorschau auf der Registerkarte „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, damit die Größe des Darstellungsbereichs automatisch angepasst wird, wenn Sie die Ausrichtung des Geräts ändern.

Lokale Überschreibungen funktionieren jetzt mit einigen in HTML definierten Stilen

Als die Entwicklertools in Chrome 65 lokale Überschreibungen eingeführt haben, konnten Änderungen an in HTML definierten Stilen nicht nachverfolgt werden. In Abbildung 7 gibt es beispielsweise eine Stilregel im 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 im Bereich Style der Entwicklertools geändert haben, wird die Änderung durch lokale Überschreibungen nicht verfolgt. Das heißt, bei der nächsten Aktualisierung wird der Stil auf font-weight: bold zurückgesetzt. In Chrome 66 hingegen bleiben solche Änderungen beim Seitenaufbau bestehen.

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

Bei der Erstellung des Videos Erste Schritte mit der Fehlerbehebung bei JavaScript gaben einige Zuschauer an, dass Haltepunkte von Event-Listenern für Apps, die auf Frameworks basieren, nicht hilfreich sind, da die Event-Listener oft in Framework-Code eingebettet sind. In Abbildung 8 habe ich beispielsweise einen Haltepunkt click 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 wird im Wrapper-Code von Vue.js in Zeile 1802 eine Pause eingefügt, was nicht sehr hilfreich ist.

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

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

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

Das Vue.js-Skript im Bereich „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 Haltepunkt click auslöse, wird der Vue.js-Code ohne Pause ausgeführt und dann bei der ersten Codezeile im Listener meiner App angehalten. Hier wollte ich wirklich die ganze Zeit anhalten.

Der Haltepunkt für Klicks wird jetzt im Listener-Code der App pausiert.

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

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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

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

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