Neuerungen in den Entwicklertools (Chrome 77)

Kayce Basques

Stile des Elements kopieren

Klicken Sie mit der rechten Maustaste auf einen Knoten in der DOM-Struktur, um den CSS-Code dieses DOM-Knotens in die Zwischenablage zu 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. Während Sie die Seite lesen, verlieren Sie ständig Ihren Platz, weil der Inhalt hin und her rutscht. Dieses Problem wird als Layout sich bewegen. Das passiert normalerweise, wenn Bilder und Anzeigen vollständig geladen wurden. Auf der Seite wurde kein Platz reserviert für die Bilder und Anzeigen, sodass der Browser den gesamten anderen Content nach unten verschieben muss, um Platz für . Das Problem lässt sich durch die Verwendung von Platzhaltern lösen.

Mit den Entwicklertools können Sie jetzt Layout Shifts erkennen:

1. Öffnen Sie das Befehlsmenü.
2. Beginnen Sie mit der Eingabe von Rendering.
3. Führen Sie den Befehl Show Rendering (Rendering anzeigen) aus.
4. Aktivieren Sie das Kästchen Layout Shift Regions. Bei der Interaktion mit einer Seite werden Layout Shifts werden blau hervorgehoben.

Abbildung 2. Ein Layout Shift.

Chromium-Problem 961846

Lighthouse 5.1 im Bereich „Audits“

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

• Stellt eine gültige apple-touch-icon bereit. Prüft, ob eine PWA einem iOS-Startbildschirm hinzugefügt werden kann.
• Halten Sie die Anzahl der Anfragen und Dateigrößen niedrig. Gibt die Gesamtzahl der Netzwerkanfragen und Dateigrößen für verschiedene Kategorien wie Dokumente, Skripte, Stylesheets, Bilder usw.
• Maximales potenzielles First Input Delay Misst die maximale potenzielle Zeit zwischen der der ersten Interaktion auf der Seite und der Browserreaktion auf diese Interaktion. Dieser Messwert ersetzt den Messwert "Geschätzte Eingabelatenz". Maximales potenzielles First Input Delay wird nicht berücksichtigt Leistungskategorie ein.

Abbildung 3: Die neue Benutzeroberfläche des Audit-Bereichs

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

• Leistungsbudgets: Verhindern Sie, dass Ihre Website im Laufe der Zeit zurückgeht, indem Sie eine Anfrage angeben Anzahl und Dateigrößen, die Seiten nicht überschreiten dürfen.
• Plug-ins. Erweitern Sie Lighthouse mit Ihren eigenen benutzerdefinierten Audits.
• Stack Packs Fügen Sie Audits hinzu, die auf bestimmte Technology Stacks zugeschnitten sind. WordPress-Stack Pack zuerst versendet werden. React- und AMP-Stackpacks sind in der Entwicklung.

Synchronisierung des Betriebssystemdesigns

Wenn du das dunkle Design deines Betriebssystems verwendest, wird in den Entwicklertools jetzt das eigene dunkle Design verwendet. automatisch.

Tastenkombination zum Öffnen des Breakpoint-Editors

Drücken Sie Strg + Alt + B oder Befehlstaste + Wahltaste + B (Mac), wenn der Fokus im Editor des Quellenbereichs ist um den Breakpoint-Editor zu öffnen. Verwenden Sie den Breakpoint Editor, um Logpoints zu erstellen und Bedingte Haltepunkte.

Abbildung 4: Haltepunkt-Editor

Prefetch-Cache im Netzwerkbereich

In der Spalte Größe des Steuerfelds „Netzwerk“ wird jetzt (prefetch cache) angezeigt, wenn eine Ressource aus den Prefetch-Cache. Prefetch ist eine neue Webplattform-Funktion, mit der nachfolgende Seiten schneller geladen werden. geladen wird. Can I use... gibt an, dass diese Funktion in 83,33% der Browser weltweit unterstützt wird (Stand Juli 2019).

Abbildung 5: In der Spalte Größe ist zu sehen, dass prefetch2.html und prefetch2.css aus (prefetch cache)

Weitere Informationen finden Sie unter Prefetch-Demo.

Chromium-Problem 935267

Private Properties beim Ansehen von Objekten

In der Konsole werden in der Objektvorschau jetzt Felder für private Klassen angezeigt.

Abbildung 6. In der alten Version von Chrome auf der linken Seite wird das Feld #color bei der Untersuchung des im Gegensatz zur neuen Version auf der rechten Seite.

Benachrichtigungen und Push-Nachrichten im Anwendungsbereich

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

Wie bei den Funktionen Hintergrundabruf und Hintergrundsynchronisierung von Chrome 76 gilt: Sobald Sie werden Push-Nachrichten und Benachrichtigungen auf dieser Seite drei Tage lang aufgezeichnet, auch wenn die Seite und selbst wenn Chrome geschlossen ist.

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

Chromium-Problem 927726

Vorschaukanäle herunterladen

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

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

• Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
• Problem mit den Entwicklertools über Weitere Optionen melden > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
• Twittern Sie unter @ChromeDevTools.
• Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.

Neu in den Entwicklertools

Eine Liste mit allen Themen der Reihe Neuerungen bei den Entwicklertools