Die Chrome-Entwicklertools wurden von einer Reihe aktualisierter, kleiner, aber großer Funktionen erweitert. Wir beginnen mit den Aktualisierungen des Steuerfelds „Elemente“ und sprechen dann über die Konsole, die Zeitachse und mehr.
Deaktivierte Stilregeln als auskommentiert kopieren
Wenn Sie ganze CSS-Regeln in den Bereich „Stile“ kopieren, sind jetzt auch Stile enthalten, die Sie deaktiviert haben. Sie sind in der Zwischenablage als auskommentiert vorhanden. [crbug.com/316532].
Als CSS-Pfad kopieren
„Als CSS-Pfad kopieren“ ist jetzt im Steuerfeld „Elemente“ als Menüelement für DOM-Knoten verfügbar, ähnlich wie beim Menüpunkt „XPath kopieren“.
Die Generierung von CSS-Selektoren muss nicht auf Stylesheets/JavaScript beschränkt sein. Sie können auch Alternativen für Suchstrategien in WebDriver-Tests sein. [crbug.com/277286].
Stile von Shadow-DOM-Elementen ansehen
Die Stile von untergeordneten Elementen eines Schattenstamms können jetzt geprüft werden. [crbug.com/279390].
"copy()" in der Konsole funktioniert für Objekte
Die copy()-Methode der Command Line API funktioniert jetzt für Objekte. Probieren Sie copy({foo:'bar'}) in der Konsole aus. Sie sehen, dass sich jetzt eine stringifizierte und formatierte Version des Objekts in der Zwischenablage befindet. [crbug.com/289348].
Regex-Filter für die Konsole
Sie können Konsolennachrichten im Konsolenfenster mithilfe regulärer Ausdrücke filtern. crbug.com/318308]
Einfache Entfernung von Event-Listenern
Versuchen Sie, mit getEventListeners(document).mousewheel[0]; in der Konsole den ersten Mausrad-Ereignis-Listener für das Dokument abzurufen. Fahren Sie so fort, indem Sie $_.remove() verwenden, um diesen Event-Listener zu entfernen ($_ = Wert des zuletzt ausgewerteten Ausdrucks). crbug.com/309524]
Entfernung von CSS-Warnungen
Die Warnungen des Typs Ungültiger CSS-Eigenschaftswert wurden entfernt. Wir arbeiten kontinuierlich daran, die Implementierung im Hinblick auf reales CSS, einschließlich Browser-Hacks, robuster zu gestalten. crbug.com/309982]
Zeitachsenvorgänge im Kreisdiagramm zusammengefasst
Der Bereich „Zeitachse“ enthält jetzt im Detailbereich ein Kreisdiagramm, das die Quelle Ihrer Renderingkosten visuell darstellt. So können Sie Engpässe auf einen Blick erkennen.
Sie werden feststellen, dass viele der Informationen, die früher in Pop-over-Fenstern angezeigt wurden, jetzt in einem eigenen Bereich angezeigt werden. Zum Ansehen starten Sie eine Zeitachsenaufnahme und wählen Sie einen Frame aus. Im neuen Detailbereich gibt es jetzt ein Kreisdiagramm. In der Frames-Ansicht erhalten Sie interessante Statistiken wie die durchschnittlichen fps (1000ms/frame duration) für die ausgewählten Frames. [crbug.com/247786].
Details zum Ereignis zur Größenanpassung des Bildes
Die Ereignisse zum Ändern der Größe und Decodierung von Bildern im Steuerfeld „Zeitachse“ enthalten jetzt einen Link zum DOM-Knoten im Bereich „Elemente“.
Über den Link der Bild-URL gelangen Sie zur entsprechenden Ressource im Bereich „Ressourcen“. crbug.com/244159]
GPU-Frames
Auf der GPU ausgeführte Frames werden jetzt oben, über den Frames im Hauptthread, angezeigt. crbug.com/305863]
Hörer mit Popstate-Hits
popstate ist jetzt als Haltepunkt des Event-Listeners in der Seitenleiste des Steuerfelds „Quellen“ verfügbar. [crbug.com/88112].
Rendering-Einstellungen in der Leiste verfügbar
Wenn Sie die Leiste öffnen, werden jetzt mehrere Fenster angezeigt, darunter das Rendering-Bedienfeld, in dem Sie Farbrechtecke, FPS-Messtool usw. anzeigen können. Diese Option ist standardmäßig unter „Einstellungen“ > „Rendering-Ansicht in Konsolenleiste anzeigen“ aktiviert.
Bild als Daten-URL kopieren
Der Inhalt von Bild-Assets im Bereich „Ressourcen“ kann jetzt als Daten-URI (data:image/png;base64,iVBO...) kopiert werden.
Um dies auszuprobieren, suchen Sie die Bildressource unter „Frames“ > [Ressource] > „Bilder“ und klicken Sie mit der rechten Maustaste auf die Bildvorschau, um das Kontextmenü aufzurufen. Wählen Sie dann „Bild als Daten-URL kopieren“ aus. crbug.com/321132]
Daten-URI-Filterung
Daten-URIs können jetzt aus dem Tab „Netzwerk“ herausgefiltert werden. Wählen Sie das Filtersymbol aus.
Behebung von Netzwerk-Timing-Fehlern
Wenn der Download Ihres Bildes offenbar 300.000 Jahre gedauert hat, bitten wir um Entschuldigung. Die falschen Zeitangaben für Netzwerkressourcen wurden behoben. crbug.com/309570]
Das Verhalten bei Netzwerkaufzeichnungen bietet mehr Kontrolle
Das Verhalten des Aufnahmenetzwerks ist etwas anders. Die Schaltfläche zum Aufzeichnen verhält sich genau so, wie Sie es von der Zeitachse oder einem CPU-Profil erwarten würden. Und weil es zu erwarten war, wird automatisch die Netzwerkaufzeichnung gestartet, wenn du die Seite aktualisierst, während die Entwicklertools geöffnet sind. Anschließend wird sie deaktiviert. Wenn Sie Netzwerkaktivitäten nach dem Seitenaufbau erfassen möchten, müssen Sie sie aktivieren. So lässt sich die Vermittlungsabfolge leichter visualisieren, ohne dass verspätete Netzwerkanfragen die Ergebnisse verfälschen. crbug.com/325878]
Entwicklertools-Designs jetzt über Erweiterungen verfügbar
Nutzer-Stylesheets sind jetzt über Entwicklertools-Experimente verfügbar (Kästchen „Benutzerdefinierte UI-Designs zulassen“), wodurch eine Chrome-Erweiterung benutzerdefinierte Stile auf die Entwicklertools anwenden kann. Ein Beispiel finden Sie unter Beispiel für die Designerweiterung für Entwicklertools. crbug.com/318566]
Das war diese Ausgabe der Entwicklertools-Kurzübersicht. In der November-Ausgabe solltest du einen Blick darauf werfen.