In den letzten Wochen wurden einige neue Funktionen in die Chrome DevTools aufgenommen, einige kleine, einige große. Wir beginnen mit den Änderungen am Bereich „Elemente“ und sprechen dann über die Console, die Zeitachse und mehr.
Deaktivierte Stilregeln werden als auskommentiert kopiert
Wenn Sie im Bereich „Stile“ ganze CSS-Regeln kopieren, werden jetzt auch deaktivierte Stile kopiert. Sie werden in der Zwischenablage als kommentiert angezeigt. [crbug.com/316532]
Als CSS-Pfad kopieren
„Als CSS-Pfad kopieren“ ist jetzt als Menüpunkt für DOM-Knoten im Bereich „Elemente“ verfügbar (ähnlich wie der Menüpunkt „XPath kopieren“).
Die Generierung von CSS-Selektoren muss sich nicht auf Ihre Stylesheets/JavaScript beschränken. Sie können auch als Alternativen für Locator-Strategien in WebDriver-Tests verwendet werden. [crbug.com/277286]
Shadow-DOM-Element-Stile ansehen
Die Stile von untergeordneten Elementen eines Schatten-Root-Elements können jetzt geprüft werden. [crbug.com/279390]
copy() der Konsole funktioniert für Objekte
Die Methode copy() aus der Command Line API funktioniert jetzt auch für Objekte. Geben Sie copy({foo:'bar'}) in das Console-Steuerfeld ein. Sie sehen dann, dass eine stringisierte und formatierte Version des Objekts jetzt in der Zwischenablage ist. [crbug.com/289348]
Regex-Filter für die Console
Console-Nachrichten können im Console-Steuerfeld mit regulären Ausdrücken gefiltert werden. crbug.com/318308]
Event-Listener ganz einfach entfernen
Probieren Sie getEventListeners(document).mousewheel[0]; im Konsolenbereich aus, um den ersten Mausrad-Ereignis-Listener im Dokument abzurufen. Versuchen Sie als Nächstes, $_.remove(); zu verwenden, um diesen Ereignis-Listener zu entfernen ($_ = Wert des zuletzt ausgewerteten Ausdrucks). crbug.com/309524]
Entfernung von Warnungen zu Preisvergleichsportalen
Warnungen vom Typ Ungültiger CSS-Eigenschaftswert wurden entfernt. Wir arbeiten kontinuierlich daran, die Implementierung robuster gegen reale CSS-Probleme wie Browser-Hacks zu machen. crbug.com/309982]
Zeitachsenvorgänge in einem Kreisdiagramm zusammengefasst
Der Bereich „Zeitachse“ enthält jetzt im Bereich „Details“ ein Kreisdiagramm, das die Quelle Ihrer Renderingkosten visuell darstellt. So können Sie Engpässe auf einen Blick erkennen.
Viele der Informationen, die früher in Pop-ups angezeigt wurden, sind jetzt in einem eigenen Bereich zu finden. Wenn Sie sich die Daten ansehen möchten, starten Sie eine Zeitachsenaufzeichnung und wählen Sie einen Frame aus. Beachten Sie den neuen Detailbereich mit einem Kreisdiagramm. In der Ansicht „Frames“ findest du interessante Statistiken wie die durchschnittliche FPS (1000ms/frame duration) für die ausgewählten Frames. [crbug.com/247786]
Bildgröße für Ereignisdetails anpassen
Ereignisse zum Ändern der Größe und Decodieren von Bildern im Zeitachsenbereich enthalten jetzt einen Link zum DOM-Knoten im Elementbereich.
Über den Link „Bild-URL“ gelangen Sie zum entsprechenden Ressourcenbereich. crbug.com/244159]
GPU-Frames
Frames, die auf der GPU ausgeführt werden, werden jetzt oben über den Frames im Hauptthread angezeigt. crbug.com/305863]
Bei Popstate-Listenern pausieren
popstate ist jetzt als Breakpoint für Ereignis-Listener in der Seitenleiste des Bereichs „Quellen“ verfügbar. [crbug.com/88112]
Rendering-Einstellungen im Drop-down-Menü
Wenn Sie die Leiste öffnen, werden jetzt mehrere Bereiche angezeigt, darunter der Bereich „Rendering“. Dort können Sie Rechtecke zum Malen und den FPS-Messwert anzeigen lassen. Diese Option ist standardmäßig unter „Einstellungen“ > „Darstellung ‚Rendering‘ in der Console-Leiste 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.
Wenn Sie das ausprobieren möchten, 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]
Filtern von Data URIs
Daten-URIs können jetzt auf dem Tab „Netzwerk“ herausgefiltert werden. Filtersymbol auswählen
Fehler beim Netzwerk-Timing behoben
Wenn Sie gesehen haben,dass der Download Ihres Bildes anscheinend 300.000 Jahre gedauert hat, entschuldigen wir uns. ;) Diese falschen Zeitangaben für Netzwerkressourcen wurden jetzt behoben. crbug.com/309570]
Bessere Kontrolle über das Netzwerkaufzeichnungsverhalten
Das Verhalten des Aufnahmenetzwerks ist etwas anders. Erstens: Die Schaltfläche „Aufzeichnen“ funktioniert genau wie bei der Zeitachse oder einem CPU-Profil. Wie Sie sich vorstellen können, wird die Netzwerkaufzeichnung automatisch gestartet, wenn Sie die Seite neu laden, während die Entwicklertools geöffnet sind. Die Funktion wird dann deaktiviert. Wenn Sie die Netzwerkaktivität nach dem Laden der Seite erfassen möchten, müssen Sie sie aktivieren. So lässt sich die Abfolge leichter visualisieren, ohne dass spät eingehende Netzwerkanfragen die Ergebnisse verfälschen. crbug.com/325878]
DevTools-Designs jetzt über Erweiterungen verfügbar
Nutzer-Stylesheets sind jetzt über DevTools-Tests verfügbar (Kästchen „Benutzerdefinierte UI-Designs zulassen“). Damit kann eine Chrome-Erweiterung benutzerdefiniertes Styling auf die Entwicklertools anwenden. Ein Beispiel finden Sie unter Beispiel für eine DevTools-Themenerweiterung. crbug.com/318566]
Das war es für diese Ausgabe des DevTools-Digests. Falls Sie es noch nicht getan haben, sehen Sie sich die Novemberausgabe an.