Neuerungen in den Entwicklertools (Chrome 77)

Kayce Basques

Stile des Elements kopieren

Klicken Sie mit der rechten Maustaste auf einen Knoten im DOM-Baum, um das CSS dieses DOM-Knotens in die Zwischenablage zu kopieren.

Stile kopieren.

Abbildung 1: Elementestile kopieren

Vielen Dank an Adam Argyle und VisBug für die Inspiration.

Layoutänderungen visualisieren

Angenommen, Sie lesen einen Nachrichtenartikel auf Ihrer Lieblingswebsite. Beim Lesen der Seite verlieren Sie immer wieder den Überblick, weil die Inhalte hin- und herspringen. Dieses Problem wird als Layout-Verschiebung bezeichnet. Das passiert normalerweise, wenn Bilder und Anzeigen vollständig geladen sind. Auf der Seite wurde kein Platz für die Bilder und Anzeigen reserviert. Daher muss der Browser alle anderen Inhalte nach unten verschieben, um Platz dafür zu schaffen. Die Lösung besteht darin, Platzhalter zu verwenden.

Mit DevTools können Sie jetzt Layoutverschiebungen erkennen:

  1. Öffnen Sie das Befehlsmenü.
  2. Geben Sie Rendering ein.
  3. Führen Sie den Befehl Rendering anzeigen aus.
  4. Klicken Sie das Kästchen Layout Shift-Bereiche an. Wenn Sie mit einer Seite interagieren, werden Layoutänderungen blau hervorgehoben.

Layout Shift

Abbildung 2. Layout Shift

Chromium-Problem 961846

Lighthouse 5.1 im Bereich „Analysen“

Im Bereich „Analysen“ wird jetzt Lighthouse 5.1 verwendet. Zu den neuen Audits gehören:

Die neue Benutzeroberfläche des Bereichs „Audits“

Abbildung 3: Die neue Benutzeroberfläche des Bereichs „Audits“

Die Node- und CLI-Versionen von Lighthouse 5.1 bieten drei neue Hauptfunktionen, die Sie sich ansehen sollten:

  • Leistungsbudgets Sie können verhindern, dass die Leistung Ihrer Website im Laufe der Zeit abnimmt, indem Sie die Anzahl der Anfragen und die Dateigrößen angeben, die Seiten nicht überschreiten dürfen.
  • Plug-ins Erweitern Sie Lighthouse mit Ihren eigenen benutzerdefinierten Prüfungen.
  • Stack-Packs Fügen Sie Prüfungen hinzu, die auf bestimmte Technologiestacks zugeschnitten sind. Das WordPress-Stack-Paket wurde zuerst versendet. React- und AMP-Stack-Pakete befinden sich in der Entwicklungsphase.

Synchronisierung des Betriebssystem-Designs

Wenn Sie das dunkle Design Ihres Betriebssystems verwenden, wechselt DevTools jetzt automatisch zu seinem eigenen dunklen Design.

Tastenkombination zum Öffnen des Breakpoints-Editors

Drücken Sie Strg + Alt + B oder Befehlstaste + Wahltaste + B (Mac), wenn der Fokus im Editor des Bereichs „Quellen“ liegt, um den Breakpoint-Editor zu öffnen. Mit dem Breakpoint-Editor können Sie Log-Points und bedingte Breakpoints erstellen.

Der Haltepunkt-Editor.

Abbildung 4: Im Haltepunkt-Editor

Prefetch-Cache im Netzwerkbereich

In der Spalte Größe im Bereich „Netzwerk“ wird jetzt (prefetch cache) angezeigt, wenn eine Ressource aus dem Prefetch-Cache geladen wurde. Prefetch ist eine neuere Funktion der Webplattform, mit der nachfolgende Seitenladevorgänge beschleunigt werden. Laut Kann ich… verwenden? wird es seit Juli 2019 von 83,33% der Browser weltweit unterstützt.

In der Spalte „Größe“ sehen Sie, dass die Ressourcen aus dem Prefetch-Cache stammen.

Abbildung 5: In der Spalte Größe sehen Sie, dass prefetch2.html und prefetch2.css von (prefetch cache) stammen.

Demo für die Vorab-Datenübertragung

Chromium-Problem 935267

Privatgrundstücke beim Ansehen von Objekten

In der Console werden jetzt private Klassenfelder in den Objektvorschauen angezeigt.

Wenn Sie ein Objekt prüfen, werden in der Console jetzt private Felder wie „#color“ angezeigt.

Abbildung 6. In der alten Version von Chrome auf der linken Seite wird das Feld #color beim Prüfen des Objekts nicht angezeigt, in der neuen Version auf der rechten Seite hingegen schon.

Benachrichtigungen und Push-Nachrichten im Bereich „Anwendung“

Der Bereich „Hintergrunddienste“ im Bereich „Anwendung“ unterstützt jetzt Push-Nachrichten und Benachrichtigungen. Push-Nachrichten werden gesendet, wenn ein Server Informationen an einen Dienst-Worker sendet. Benachrichtigungen werden angezeigt, wenn ein Service Worker oder ein Seitenskript dem Nutzer Informationen anzeigt.

Wie bei den Funktionen „Im Hintergrund abrufen“ und „Im Hintergrund synchronisieren“ in Chrome 76 werden Push-Nachrichten und Benachrichtigungen auf dieser Seite nach Beginn der Aufzeichnung drei Tage lang aufgezeichnet, auch wenn die Seite geschlossen ist oder Chrome geschlossen wird.

Die neuen Bereiche „Benachrichtigungen“ und „Push-Nachrichten“.

Abbildung 7. Die neuen Bereiche „Push-Nachrichten“ und „Benachrichtigungen“ im Bereich „Anwendung“

Chromium-Problem 927726

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.

Neu in den DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.