Neuerungen in den Entwicklertools (Chrome 78)

Kayce Basques

Unterstützung mehrerer Kunden im Bereich „Audits“

Sie können den Bereich Audits jetzt in Kombination mit anderen DevTools-Funktionen wie Anfrageblockierung und lokale Überschreibungen verwenden.

Angenommen, im Bereich Analysen wird für Ihre Seite eine Leistungsbewertung von 70 % angezeigt und eine der größten Leistungsverbesserungen besteht darin, Ressourcen zu entfernen, die das Rendern blockieren.

Der anfängliche Leistungsfaktor beträgt 70.

Abbildung 1: Der ursprüngliche Wert für Leistung.

Im ersten Bericht wird angegeben, dass drei renderblockierende Scripts ein Problem darstellen.

Abbildung 2. Im ersten Bericht wird angegeben, dass drei renderblockierende Scripts ein Problem darstellen.

Da der Bereich Analysen jetzt in Kombination mit dem Blockieren von Anfragen verwendet werden kann, können Sie schnell messen, wie stark sich die renderblockierenden Scripts auf die Ladeleistung auswirken. Dazu müssen Sie zuerst die Anfragen für die renderblockierenden Scripts blockieren:

Über den Tab „Anfrageblockierung“ können Sie die problematischen Scripts blockieren.

Abbildung 3: Über den Tab Anfrageblockierung können Sie die problematischen Scripts blockieren.

Und dann die Seite noch einmal prüfen:

Nach der Aktivierung des Anfrageblocks wurde der Leistungswert auf 97 erhöht.

Abbildung 4: Nachdem die problematischen Scripts blockiert wurden, stieg der Wert für die Leistung auf 97.

Alternativ können Sie mithilfe von lokalen Überschreibungen jedem Script-Tag async-Attribute hinzufügen. Das überlassen wir aber dem Leser als Übung. Hier finden Sie eine Demo für mehrere Kunden. Eine Videodemonstration finden Sie in diesem Tweet.

Chromium-Problem 991906

Debuggen der Zahlungsabwicklung

Der Bereich Hintergrunddienste im Bereich Anwendung unterstützt jetzt Zahlungsabwickler-Ereignisse.

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

  3. Klicken Sie auf Aufzeichnen. In DevTools werden Zahlungsabwickler-Ereignisse für 3 Tage aufgezeichnet, auch wenn DevTools geschlossen ist.

    Ereignisse des Zahlungsabwicklers aufzeichnen

    Abbildung 5: Ereignisse des Zahlungsabwicklers aufzeichnen

  4. Aktivieren Sie Ereignisse aus anderen Domains anzeigen, wenn Ihre Ereignisse vom Zahlungsabwickler auf einem anderen Ursprung auftreten.

  5. Klicken Sie nach dem Auslösen eines Zahlungsabwickler-Ereignisses auf die Zeile des Ereignisses, um weitere Informationen zu erhalten.

    Sie sehen sich ein Ereignis des Zahlungsabwicklers an.

    Abbildung 6. Sie sehen sich ein Ereignis des Zahlungsabwicklers an.

Chromium-Problem 980291

Lighthouse 5.2 im Bereich „Analysen“

Im Bereich Analysen wird jetzt Lighthouse 5.2 verwendet. Die neue Diagnose Drittanbieternutzung gibt Aufschluss darüber, wie viel Drittanbietercode angefordert wurde und wie lange dieser Code den Hauptthread beim Laden der Seite blockiert hat. Weitere Informationen dazu, wie Drittanbietercode die Ladeleistung beeinträchtigen kann, finden Sie unter Drittanbieterressourcen optimieren.

Screenshot der Prüfung „Drittanbieternutzung“ in der Lighthouse-Berichtsoberfläche

Abbildung 7. Die Prüfung der Nutzung von Drittanbieter-Code.

Chromium-Problem 772558

Largest Contentful Paint im Bereich „Leistung“

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

Die LCP-Markierung im Bereich „Timings“

Abbildung 8. Die Markierung LCP im Bereich Timings.

So markieren Sie den mit LCP verknüpften DOM-Knoten:

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

  2. Bewegen Sie den Mauszeiger auf dem Tab Summary (Zusammenfassung) auf Related Node (Zugeordneter Knoten), um den Knoten im Viewport hervorzuheben.

    Im Bereich „Zugehöriger Knoten“ auf dem Tab „Zusammenfassung“

    Abbildung 9. Im Bereich Weitere Knoten auf dem Tab Zusammenfassung

  3. Klicken Sie auf den zugehörigen Knoten, um ihn im DOM-Baum auszuwählen.

DevTools-Probleme über das Hauptmenü melden

Wenn Sie in den Entwicklertools auf einen Fehler stoßen und ihn melden möchten oder eine Idee zur Verbesserung der Entwicklertools haben und eine neue Funktion anfordern möchten, rufen Sie Hauptmenü > Hilfe > DevTools-Problem melden auf, um ein Problem im Tracker des Entwicklerteams für die Entwicklertools zu erstellen. Wenn Sie ein minimales, reproduzierbares Beispiel auf Glitch bereitstellen, kann das Team den Fehler viel einfacher beheben oder die gewünschte Funktion implementieren.

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

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

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.