Neuerungen in den Entwicklertools (Chrome 78)

Kayce Basques

Unterstützung mehrerer Kunden im Bereich „Audits“

Sie können das Audits-Panel jetzt in Kombination mit anderen DevTools-Funktionen wie Anfrageblockierung und Lokale Überschreibungen verwenden.

Angenommen, im Bereich Audits wird für Ihre Seite ein Leistungsfaktor von 70 angezeigt und eine der größten Leistungsoptimierungsmöglichkeiten ist das Entfernen von Ressourcen, die das Rendern blockieren.

Abbildung 1: Der ursprüngliche Leistungsfaktor.

Abbildung 2. Im ursprünglichen Bericht wird angegeben, dass drei renderblockierende Skripts ein Problem darstellen.

Da das Bereich „Audits“ jetzt in Kombination mit dem Blockieren von Anfragen verwendet werden kann, lässt sich schnell messen, wie stark sich die renderblockierenden Skripts auf die Ladeleistung auswirken. Dazu blockieren Sie zuerst die Anfragen für die renderblockierenden Skripts:

Abbildung 3: Verwenden Sie den Tab Anfrageblockierung, um die problematischen Skripts zu blockieren.

Führen Sie dann noch einmal eine Prüfung der Seite durch:

Abbildung 4: Der Leistungsfaktor hat sich nach dem Blockieren der problematischen Skripts auf 97 verbessert.

Alternativ können Sie Local Overrides verwenden, um jedem Script-Tag async-Attribute hinzuzufügen. Das ist aber eine Aufgabe für den Leser. In diesem Tweet finden Sie ein Demovideo.

Chromium-Problem 991906

Fehlerbehebung bei der Zahlungsabwicklung

Der Bereich Anwendung enthält jetzt den Abschnitt Hintergrunddienste, in dem Payment Handler-Ereignisse unterstützt werden.

1. Rufen Sie den Bereich Anwendung auf.
2. Öffnen Sie den Bereich Zahlungsabwicklung.

3. Klicken Sie auf Aufzeichnen. DevTools zeichnet Payment Handler-Ereignisse für 3 Tage auf, auch wenn DevTools geschlossen ist.

   

   Abbildung 5: Ereignisse des Zahlungshandlers aufzeichnen.

4. Aktivieren Sie Ereignisse aus anderen Domains anzeigen, wenn Ihre Payment Handler-Ereignisse an einem anderen Ursprung auftreten.

5. Klicken Sie nach dem Auslösen eines Payment Handler-Ereignisses auf die Zeile des Ereignisses, um mehr darüber zu erfahren.

   

   Abbildung 6: Ein Payment Handler-Ereignis ansehen

Chromium-Problem 980291

Lighthouse 5.2 im Bereich „Prüfungen“

Im Bereich Prüfungen wird jetzt Lighthouse 5.2 ausgeführt. Der neue Drittanbietercode-Diagnose-Audit gibt Aufschluss darüber, wie viel Drittanbietercode angefordert wurde und wie lange dieser Code den Hauptthread während des Seitenaufbaus blockiert hat. Weitere Informationen dazu, wie Code von Drittanbietern die Ladegeschwindigkeit beeinträchtigen kann, finden Sie unter Ressourcen von Drittanbietern optimieren.

Abbildung 7. Das Audit Drittanbieter-Nutzung.

Chromium-Problem 772558

Largest Contentful Paint im Bereich „Leistung“

Wenn Sie die Ladeleistung im Bereich Leistung analysieren, enthält der Abschnitt Zeitachse jetzt eine Markierung für Largest Contentful Paint (LCP). LCP gibt die Renderingzeit des größten im Darstellungsbereich sichtbaren Inhaltselements an.

Abbildung 8. Die Markierung LCP im Bereich Timings.

So heben Sie den mit dem LCP verknüpften DOM-Knoten hervor:

1. Klicken Sie im Bereich Zeitachse auf die Markierung LCP.

2. Bewegen Sie den Mauszeiger auf dem Tab Zusammenfassung auf Zugehöriger Knoten, um den Knoten im Ansichtsfenster hervorzuheben.

   

   Abbildung 9. Im Abschnitt Zugehöriger Knoten auf dem Tab Zusammenfassung

3. Klicken Sie auf Zugehöriger Knoten, um ihn im DOM-Baum auszuwählen.

DevTools-Probleme über das Hauptmenü melden

Wenn Sie in den Entwicklertools einen Fehler finden und ein Problem melden möchten oder eine Idee haben, wie die Entwicklertools verbessert werden könnten, und eine neue Funktion anfordern möchten, rufen Sie das Hauptmenü > Hilfe > DevTools-Problem melden auf, um ein Problem im Tracker des DevTools-Entwicklungsteams zu erstellen. Wenn Sie ein minimales, reproduzierbares Beispiel bereitstellen, kann das Team Ihren Fehler viel schneller beheben oder Ihre Feature-Anfrage umsetzen.

Hilfe > DevTools-Problem melden.“ width=“800“ height=“604“>

Abbildung 10. Hauptmenü > Hilfe > DevTools-Problem melden.

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.

• Sie können uns Feedback und Funktionsanfragen unter crbug.com senden.
• Melden Sie ein DevTools-Problem in den Entwicklertools über das more_vert Weitere Optionen > Hilfe > DevTools-Problem melden.
• Senden Sie einen Tweet an @ChromeDevTools.
• Hinterlassen Sie Kommentare unter den YouTube-Videos zu Neuerungen in den DevTools oder den YouTube-Videos mit DevTools-Tipps.

Neu in den Entwicklertools

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