Neuerungen in den Entwicklertools (Chrome 78)

Kayce Basques

Mehrfachkundenunterstützung im Audit-Bereich

Du kannst den Bereich Audits jetzt in Kombination mit anderen Entwicklertools-Funktionen wie Anfrage Blockierungen und lokale Überschreibungen:

Angenommen, in Ihrem Bericht im Bereich Prüfungen steht, dass die Leistungspunktzahl Ihrer Seite 70 beträgt. und eine der größten Möglichkeiten zur Leistungssteigerung ist der Beseitigung von Ressourcen, die das Rendering blockieren.

Die anfängliche Leistungsbewertung beträgt 70.

Abbildung 1: Die anfängliche Leistungsbewertung.

Im ersten Bericht steht, dass drei Skripts ein Problem darstellen, die das Rendering blockieren.

Abbildung 2. Im ersten Bericht steht, dass drei Skripts ein Problem darstellen, die das Rendering blockieren.

Da der Bereich Audits jetzt in Kombination mit der Blockierung von Anfragen verwendet werden kann, wie stark sich die Skripts, die das Rendering blockieren, auf die Ladeleistung auswirken, indem Sie zunächst die an die Skripts, die das Rendering blockieren:

Verwenden des Tabs „Anfrageblockierung“, um problematische Scripts zu blockieren

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

Anschließend prüfen Sie die Seite noch einmal:

Nachdem die Blockierung von Anfragen aktiviert wurde, hat sich die Leistung auf 97 verbessert.

Abbildung 4: Die Leistung wurde auf 97 verbessert, nachdem die problematischen Skripts blockiert wurden.

Alternativ können Sie Lokale Überschreibungen verwenden, um jedem Skript async-Attribute hinzuzufügen. „Wir überlassen es dem Leser als Übung“. Rufen Sie die Mehrfachkundendemo auf, um sie auszuprobieren. aus. Sie können sich auch diesen Tweet mit einer Videodemonstration ansehen.

Chromium-Problem 991906

Debugging des Zahlungs-Handlers

Der Abschnitt Background Services des Bereichs Application unterstützt jetzt den Payment Handler. Ereignisse.

  1. Gehen Sie zum Bereich Anwendung.
  2. Öffnen Sie den Bereich Payment Handler.

  3. Klicken Sie auf Record (Aufzeichnen). In den Entwicklertools werden Payment Handler-Ereignisse 3 Tage lang aufgezeichnet, auch wenn die Entwicklertools geschlossen.

    Payment Handler-Ereignisse werden aufgezeichnet.

    Abbildung 5: Payment Handler-Ereignisse werden aufgezeichnet.

  4. Aktivieren Sie Ereignisse aus anderen Domains anzeigen, wenn Ihre Payment Handler-Ereignisse auf einer anderen Domain auftreten. Ursprung.

  5. Klicke nach dem Auslösen eines Payment Handler-Ereignisses auf die Zeile des Ereignisses, um mehr über das Ereignis zu erfahren.

    Ein Payment Handler-Ereignis wird angezeigt.

    Abbildung 6. Ein Payment Handler-Ereignis wird angezeigt.

Chromium-Problem 980291

Lighthouse 5.2 im Bereich „Audits“

Im Bereich Audits wird jetzt Lighthouse 5.2 ausgeführt. Das neue Diagnosetool Nutzung von Drittanbietern Aus der Prüfung erfahren Sie, wie viel Drittanbietercode angefordert wurde und wie lange dieser Code blockiert wurde. während die Seite geladen wird. Weitere Informationen finden Sie unter Optimierung Ihrer Drittanbieter-Ressourcen. wie Drittanbietercode die Ladeleistung beeinträchtigen kann.

Screenshot der Meldung „Nutzung durch Drittanbieter“ in der Lighthouse-Berichts-UI.

Abbildung 7. Die Prüfung Nutzung durch Drittanbieter.

Chromium-Problem 772558

Largest Contentful Paint im Steuerfeld „Leistung“

Beim Analysieren der Lastleistung im Steuerfeld Leistung wird jetzt der Bereich Timings angezeigt. enthält eine Markierung für Largest Contentful Paint (LCP). LCP meldet die Renderingzeit des größtes Inhaltselement, das im Darstellungsbereich sichtbar ist.

Die LCP-Markierung im Bereich „Timings“.

Abbildung 8. Die LCP-Markierung im Bereich Timings.

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

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

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

    Der Abschnitt Zugehöriger Knoten des Tabs „Zusammenfassung“.

    Abbildung 9. Im Abschnitt Zugehöriger Knoten des Tabs Zusammenfassung.

  3. Klicken Sie auf den Zugehörigen Knoten, um ihn in der DOM-Baumstruktur auszuwählen.

Probleme mit Entwicklertools im Hauptmenü

Wenn ihr in den Entwicklertools auf einen Fehler gestoßen seid und ein Problem melden möchtet oder Wenn du die Entwicklertools verbessern möchtest und eine neue Funktion anfragen möchtest, rufe Hauptmenü auf > Hilfe > Melden DevTools-Problem, um ein Problem im Tracker des Entwicklertools-Entwicklerteams zu erstellen. Durch die Angabe eines minimales, reproduzierbares Beispiel für Glitch deutlich verbessert Ihren Fehler zu beheben oder Ihre Funktionsanfrage zu implementieren.

Hilfe > Problem mit den Entwicklertools melden.“ width="800" Höhe="604">

Abbildung 10. Hauptmenü > Hilfe > Problem mit den Entwicklertools melden

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