Neuerungen in den Entwicklertools (Chrome 64)

Kayce Basques
Kayce Basques
X GitHub

Willkommen zurück! Zu den neuen Funktionen, die in Chrome 64 in die Entwicklertools eingeführt werden, gehören:

Lesen Sie weiter oder sehen Sie sich die Videoversion dieser Versionshinweise unten an.

Leistungsüberwachung

Mit dem Leistungsmonitor können Sie sich verschiedene Aspekte der Lade- oder Laufzeitleistung einer Seite in Echtzeit ansehen, darunter:

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

Wenn Nutzer berichten, dass Ihre App langsam oder ruckelig ist, sollten Sie im Leistungsmonitor nach Hinweisen suchen.

Warum die Ladeleistung wichtig ist: BookMyShow konnte die Conversions um 80% steigern, als das Unternehmen eine Progressive Web-App entwickelte, bei der die Geschwindigkeit im Vordergrund stand. Weitere Informationen

So verwenden Sie den Performance Monitor:

  1. Öffnen Sie das Befehlsmenü.

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

    Leistungsüberwachung Abbildung 1. Die Leistungsüberwachung

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

Zugehörige 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 und CPU-Auslastung. Kann auch zur Analyse der Ladeleistung verwendet werden. Weitere Informationen
  • Bereich Audits. Führen Sie eine Reihe automatisierter Last- und Laufzeitleistungstests für eine beliebige URL aus. Weitere Informationen

Wenn Sie gerade erst mit der Analyse der Leistung beginnen, sollten Sie zuerst das Audits-Panel verwenden und dann das Leistungs-Panel oder den Leistungs-Monitor verwenden, um weitere Informationen zu erhalten.

Konsolenseitenleiste

Auf großen Websites kann die Konsole schnell mit irrelevanten Meldungen überflutet werden. Mit der neuen Seitenleiste der Console können Sie die Anzahl der Benachrichtigungen reduzieren und 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.

Zugehörige Funktionen:

  • Textfeld Filter Geben Sie Text ein. In der Konsole werden dann nur Nachrichten angezeigt, die diesen Text enthalten. Unterstützt auch Regex-Muster, Ausschlussfilter und URL-Filter.

Ähnliche Konsolennachrichten gruppieren

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

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

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

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.

Zugehörige Funktionen:

  • Sie können Ihre eigenen Konsolennachrichten mit console.group() gruppieren.

Lokale Überschreibungen

Hoppla! Wir hatten ursprünglich geplant, diese Funktion in Chrome 64 einzuführen, haben sie aber kurz vor dem Termin zurückgezogen, um einige Unregelmäßigkeiten zu beseitigen. Offenbar wurde die Benutzeroberfläche „Neuigkeiten“ 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 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.