Neuerungen in den Entwicklertools (Chrome 64)

Kayce Basques

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

Unten können Sie die folgenden Versionshinweise lesen oder sich die Videoversion dieser Versionshinweise ansehen.

Leistungsüberwachung

Verwenden Sie die Leistungsüberwachung, um in Echtzeit einen Überblick über verschiedene Aspekte des Ladevorgangs oder der Leistung einer Seite zu erhalten. Laufzeitleistung, einschließlich:

  • CPU-Nutzung.
  • JavaScript-Heap-Größe.
  • Die Gesamtzahl der DOM-Knoten, JavaScript-Ereignis-Listener, Dokumente und Frames auf der Seite.
  • Neuberechnungen von Layouts und Stilen pro Sekunde

Wenn Nutzer melden, dass deine App langsam oder unübersichtlich wirkt, sieh in der Leistungsüberwachung nach Hinweise geben.

Warum ist es wichtig, die Leistung zu laden: BookMyShow erzielte 80% mehr Conversions, wenn es eine Progressive Web-App mit Schwerpunkt auf Geschwindigkeit Weitere Informationen

So verwenden Sie die Leistungsüberwachung:

  1. Öffnen Sie das Befehlsmenü.

  2. Beginnen Sie mit der Eingabe von Performance 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. In Abbildung 1 sind CPU-Nutzung, JS-Heap-Größe und JS Event-Listener werden Diagramme angezeigt.

Ähnliche Funktionen:

  • Bereich Leistung: Eine kritische User Journey durchgehen und alles aufzeichnen, was auf einschließlich JavaScript-Aktivität, Netzwerkanfragen, CPU-Nutzung und vieles mehr. Kann auch sein zur Analyse der Ladeleistung. Weitere Informationen
  • Bereich Audits. Führen Sie eine Reihe automatisierter Last- und Laufzeitleistungstests für beliebige URLs durch. Weitere Informationen

Wenn Sie gerade erst mit der Leistungsanalyse beginnen, empfiehlt es sich, zuerst die Methode Audits und sehen Sie sich die Ergebnisse dann über das Steuerfeld Leistung oder Leistung weiter an. überwachen.

Seitenleiste der Konsole

Auf großen Websites kann die Konsole schnell mit irrelevanten Nachrichten überschwemmt werden. Verwenden Sie die neue Console Seitenleiste, um Geräusche zu reduzieren und sich auf wichtige Nachrichten zu konzentrieren.

Nur Fehlermeldungen in der Seitenleiste der Konsole anzeigen

Abbildung 2. Nur Fehlermeldungen in der Seitenleiste der Konsole anzeigen

Die Seitenleiste der Konsole ist standardmäßig ausgeblendet. Klicken Sie auf Konsolenseitenleiste anzeigen. Seitenleiste der Konsole anzeigen um sie anzuzeigen.

Ähnliche Funktionen:

  • Filter. Geben Sie einen Text ein. Die Konsole zeigt dann nur Nachrichten an, die diesen Text enthalten. Text. Unterstützt außerdem Regex-Muster, negative Filter und URL-Filter.

Ähnliche Konsolennachrichten gruppieren

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

Ein Beispiel für die Konsole, in der ähnliche Nachrichten gruppiert werden

Abbildung 3. Beispiel für die Konsole, in der ähnliche Nachrichten gruppiert werden

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

Beispiel für eine erweiterte Gruppe von Console-Nachrichten

Abbildung 4. Beispiel für eine erweiterte Gruppe von Console-Nachrichten

Deaktivieren Sie das Kontrollkästchen Ähnliche Gruppen, 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, aber wir haben sie fast um einige Nachteile auszugleichen. Offensichtlich wurde die Benutzeroberfläche "Neue Funktionen" nicht in . Tut uns leid!

Diese Funktion ist in Chrome 65 verfügbar, das ungefähr sechs Wochen nach Chrome 64 zur Verfügung steht. Prüfen finden Sie unter Lokale Überschreibungen weitere Informationen. Wenn Sie Windows oder Mac verwenden, können Sie jetzt Chrome 65 testen, indem Sie Chrome Canary herunterladen

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 Mehr > 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