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.

Abbildung 1: Die anfängliche Leistungsbewertung.

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:

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

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

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 Aufzeichnen. In den Entwicklertools werden Payment Handler-Ereignisse 3 Tage lang aufgezeichnet, auch wenn die Entwicklertools geschlossen.

   

   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.

   

   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.

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.

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.

   

   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 jemals auf einen Fehler in den Entwicklertools 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 Entwicklerteams der Entwicklertools zu erstellen. Durch die Angabe eines minimales, reproduzierbares Beispiel für Glitch deutlich verbessert oder Ihre Funktionsanfrage 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 erhalten Sie Zugriff auf die neuesten Entwicklertools, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website erkennen, bevor Ihre 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 > 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