Neuerungen in den Entwicklertools (Chrome 77)

Kayce Basques
Kayce Basques
X GitHub

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: Elementstile kopieren

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

Layout Shifts visualisieren

Angenommen, Sie lesen einen Nachrichtenartikel auf Ihrer Lieblingswebsite. Sie lesen die Seite und verlieren immer wieder den Faden, weil der Inhalt springt. Dieses Problem wird als Layout-Verschiebung bezeichnet. Das passiert normalerweise, wenn Bilder und Anzeigen geladen wurden. Auf der Seite wurde kein Platz für die Bilder und Anzeigen reserviert. Der Browser muss daher alle anderen Inhalte nach unten verschieben, um Platz für sie zu schaffen. Die Lösung besteht darin, Platzhalter zu verwenden.

Mit den Entwicklertools können Sie jetzt Layoutverschiebungen erkennen:

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

Ein Layout Shift.

Abbildung 2. Ein Layout Shift.

Chromium-Problem 961846

Lighthouse 5.1 im Bereich „Prüfungen“

Im Bereich „Prüfungen“ wird jetzt Lighthouse 5.1 ausgeführt. Zu den neuen Audits gehören:

  • Gültiges apple-touch-icon angeben: Prüft, ob eine PWA zum iOS-Startbildschirm hinzugefügt werden kann.
  • Anzahl der Anfragen und Dateigrößen gering halten: Hier wird die Gesamtzahl der Netzwerkanfragen und Dateigrößen für verschiedene Kategorien wie Dokumente, Skripts, Stylesheets und Bilder angegeben.
  • Maximaler potenzieller First Input Delay Dieser Messwert gibt die maximal mögliche Zeit zwischen der ersten Seiteninteraktion eines Nutzers und der Reaktion des Browsers auf diese Interaktion an. Dieser Messwert ersetzt den Messwert „Geschätzte Eingabelatenz“. Der Messwert „Maximales potenzielles First Input Delay“ wird nicht in die Punktzahl für die Leistungskategorie einbezogen.

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 wichtige Funktionen, die Sie sich ansehen sollten:

  • Leistungsbudgets: Sie können verhindern, dass sich die Leistung Ihrer Website im Laufe der Zeit verschlechtert, indem Sie die Anzahl der Anfragen und die Dateigrößen angeben, die Seiten nicht überschreiten dürfen.
  • Plug-ins Lighthouse mit eigenen benutzerdefinierten Prüfungen erweitern
  • Stack Packs Fügen Sie Audits hinzu, die auf bestimmte Technologie-Stacks zugeschnitten sind. Das WordPress-Stack-Paket wurde zuerst ausgeliefert. React- und AMP-Stack-Packs sind in der Entwicklung.

Synchronisierung des Betriebssystemdesigns

Wenn Sie das dunkle Design Ihres Betriebssystems verwenden, wird in den DevTools jetzt automatisch das eigene dunkle Design aktiviert.

Tastenkombination zum Öffnen des Haltepunkt-Editors

Drücken Sie Strg + Alt + B oder Befehlstaste + Wahltaste + B (Mac), wenn der Fokus auf dem Editor des Quellenbereichs 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: Haltepunkt-Editor

Prefetch-Cache im Netzwerkbereich

In der Spalte Größe des Netzwerkbereichs wird jetzt (prefetch cache) angezeigt, wenn eine Ressource aus dem Prefetch-Cache geladen wurde. Prefetch ist eine relativ neue Webplattformfunktion, mit der nachfolgende Seitenaufrufe beschleunigt werden. Laut den Can I use...-Berichten wird es seit Juli 2019 in 83,33% der globalen Browser unterstützt.

In der Spalte „Größe“ wird angezeigt, dass 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.

Prefetch-Demo

Chromium-Problem 935267

Private Eigenschaften beim Aufrufen von Objekten

In den Objektvorschauen der Console werden jetzt private Klassenfelder angezeigt.

Beim Untersuchen eines Objekts 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 bei der Untersuchung des Objekts nicht angezeigt, in der neuen Version auf der rechten Seite schon.

Benachrichtigungen und Push-Benachrichtigungen im Bereich „Anwendung“

Im Bereich „Hintergrunddienste“ des Anwendungsbereichs werden jetzt Push-Nachrichten und Benachrichtigungen unterstützt. Push-Nachrichten werden gesendet, wenn ein Server Informationen an einen Service Worker sendet. Benachrichtigungen werden angezeigt, wenn ein Service Worker oder ein Seitenscript Informationen für den Nutzer präsentiert.

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

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

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

Chromium-Problem 927726

Vorschaukanäle herunterladen

Verwenden Sie Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung. Über diese Preview-Channels haben Sie Zugriff auf die neuesten DevTools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.

Chrome-Entwicklertools-Team kontaktieren

Verwenden Sie die folgenden Optionen, um über die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu sprechen.

Neu in den Entwicklertools

Eine Liste aller Themen, die in der Reihe Neu in den DevTools behandelt wurden.