Neuerungen in den Entwicklertools (Chrome 64)

Kayce Basques

Willkommen zurück! Zu den neuen Funktionen in den DevTools in Chrome 64 gehören:

Lies weiter oder sieh dir die Videoversion dieser Release Notes unten an.

Leistungsüberwachung

Mit dem Leistungsmonitor erhalten Sie in Echtzeit einen Überblick über verschiedene Aspekte der Lade- oder Laufzeitleistung einer Seite, darunter:

  • CPU-Auslastung.
  • JavaScript-Heap-Größe
  • Die Gesamtzahl der DOM-Knoten, JavaScript-Ereignis-Listener, Dokumente und Frames auf der Seite.
  • Layout- und Stilneuberechnungen pro Sekunde.

Wenn Nutzer berichten, dass Ihre App zu langsam oder ruckelig ist, können Sie im Leistungsmonitor nach Hinweisen suchen.

Warum die Ladeleistung wichtig ist: BookMyShow konnte die Anzahl der Conversions um 80% steigern, indem es eine progressive Webanwendung mit Schwerpunkt auf Geschwindigkeit entwickelte. Weitere Informationen

So verwenden Sie den Leistungsmonitor:

  1. Öffnen Sie das Befehlsmenü.

  2. Geben Sie Performance ein und wählen Sie dann Show Performance Monitor aus.

    Leistungsüberwachung Abbildung 1. Der Leistungsmonitor

  3. Klicken Sie auf einen Messwert, um ihn ein- oder auszublenden. In Abbildung 1 sind die Diagramme CPU-Auslastung, JS-Heap-Größe und JS-Ereignis-Listener zu sehen.

Ähnliche Funktionen:

  • Bereich Leistung Sie können eine kritische User Journey durchlaufen und alles aufzeichnen, was auf der Seite passiert, einschließlich JavaScript-Aktivitäten, Netzwerkanfragen, CPU-Nutzung und vielem mehr. Kann auch zur Analyse der Ladeleistung verwendet werden. Weitere Informationen
  • Bereich Audits Eine Reihe automatisierter Last- und Laufzeitleistungstests für eine beliebige URL ausführen. Weitere Informationen

Wenn Sie gerade erst mit der Leistungsanalyse beginnen, sollten Sie zuerst den Bereich Analysen verwenden und dann mit dem Bereich Leistung oder dem Leistungsmonitor fortfahren.

Seitenleiste der Console

Bei großen Websites kann die Console schnell mit irrelevanten Meldungen überflutet werden. Mit der neuen Console-Seitenleiste können Sie sich auf die für Sie wichtigen Nachrichten konzentrieren.

Über die Seitenleiste der Konsole nur Fehlermeldungen anzeigen

Abbildung 2. Über die Seitenleiste der Konsole nur Fehlermeldungen anzeigen

Die Seitenleiste der Konsole ist standardmäßig ausgeblendet. Klicken Sie auf Seitenleiste der Konsole anzeigen Seitenleiste „Konsole“ anzeigen, um sie einzublenden.

Ähnliche Funktionen:

  • Textfeld Filter Geben Sie Text ein. In der Console werden dann nur Nachrichten angezeigt, die diesen Text enthalten. Außerdem werden Regex-Muster, Negativfilter und URL-Filter unterstützt.

Ähnliche Konsolennachrichten gruppieren

In der Console werden ähnliche Nachrichten jetzt standardmäßig gruppiert. In Abbildung 3 gibt es beispielsweise 27 Instanzen der Nachricht [Violation] Avoid using document.write().

Beispiel für die Gruppierung ähnlicher Nachrichten in der Console

Abbildung 3. Beispiel für die Gruppierung ähnlicher Nachrichten in der Console

Klicken Sie auf eine Gruppe, um sie zu maximieren und alle Instanzen der Nachricht zu sehen.

Beispiel für eine maximierte Gruppe von Konsolennachrichten

Abbildung 4. Beispiel für eine maximierte Gruppe von Konsolennachrichten

Entfernen Sie das Häkchen aus dem Kästchen Ähnliche gruppieren, um diese Funktion zu deaktivieren.

Ähnliche Funktionen:

  • Sie können Ihre eigenen Console-Nachrichten mit console.group() gruppieren.

Lokale Überschreibungen

Hoppla! Ursprünglich war die Einführung dieser Funktion für Chrome 64 geplant, wurde aber kurz vor dem Termin verschoben, um einige Probleme zu beheben. Offenbar wurde die Benutzeroberfläche „Das ist neu“ nicht rechtzeitig aktualisiert. Tut uns leid!

Diese Funktion wird in Chrome 65 eingeführt, das etwa sechs Wochen nach Chrome 64 veröffentlicht wird. Weitere Informationen zu lokalen Überschreibungen Wenn Sie Windows oder Mac verwenden, können Sie Chrome 65 jetzt ausprobieren, indem Sie Chrome Canary herunterladen.

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.