Neuerungen in den Entwicklertools (Chrome 106)

Jecelyn Yeen

Dateien im Quellenbereich nach „Erstellt“ / „Bereitgestellt“ gruppieren

Die Option Dateien nach „Erstellt“ / „Bereitgestellt“ gruppieren wird jetzt im Dreipunkt-Menü angezeigt. Bisher wurde sie direkt im Navigationsbereich angezeigt.

Öffnen Sie diese Demo. Aktivieren Sie die Einstellung Dateien nach „Erstellt“ / „Bereitgestellt“ gruppieren, um zuerst Ihren ursprünglichen Quellcode („Erstellt“) aufzurufen und schneller zu ihm zu navigieren.

Chromium-Fehler: 1352488

Verbesserte Stacktraces

Verknüpfte Stacktraces für asynchrone Vorgänge

Wenn einige Vorgänge asynchron geplant sind, enthalten die Stacktraces in den DevTools jetzt die „ganze Geschichte“ des Vorgangs. Bisher wurde nur ein Teil der Geschichte erzählt.

Öffnen Sie diese Demo und klicken Sie auf die Schaltfläche zum Erhöhen des Zählers. Maximieren Sie die Fehlermeldung in der Console. In unserem Quellcode enthält der Vorgang einen asynchronen timeout-Vorgang.

// application.component.ts  async increment() {     await Promise.resolve().then(() => timeout(100));     … } 

Bisher wurde im Stacktrace nur der Timeout-Vorgang angezeigt. Die „Ursache“ des Vorgangs wurde nicht angezeigt.

Durch die neuesten Änderungen wird in den Entwicklertools jetzt angezeigt, dass der Vorgang vom onClick-Ereignis in der Schaltflächenkomponente, dann von der increment-Funktion und schließlich vom Timeout-Vorgang stammt.

Hinter den Kulissen wurde in DevTools die neue Funktion „Async Stack Tagging“ eingeführt. Sie können die gesamte Geschichte des Vorgangs erzählen, indem Sie beide Teile des asynchronen Codes mit der neuen Methode console.createTask() verknüpfen. Weitere Informationen finden Sie unter Modernes Debugging in den Entwicklertools.

Klingt kompliziert? Nein. In den meisten Fällen übernimmt das von Ihnen verwendete Framework die Planung und asynchrone Ausführung. In diesem Fall ist es Aufgabe des Frameworks, die API zu verwenden. Sie müssen sich darum nicht kümmern. (z.B. hat Angular diese Änderungen implementiert)

Chromium-Fehler: 1334585

Bekannte Drittanbieterskripts automatisch ignorieren

Probleme in Ihrem Code lassen sich beim Debuggen schneller erkennen, da DevTools bekannte Drittanbieterskripts jetzt automatisch der Ignorieren-Liste hinzufügt.

Öffnen Sie diese Demo und klicken Sie auf die Schaltfläche zum Erhöhen des Zählers. Maximieren Sie die Fehlermeldung in der Console. Der Stacktrace enthält nur Ihren Code (z.B. app.component.ts button.component.ts). Klicken Sie auf Weitere Frames anzeigen, um den vollständigen Stacktrace aufzurufen.

Bisher enthielt der Stacktrace Drittanbieterskripts wie zone.js und core.mjs. Das ist nicht Ihr Quellcode, sondern er wird von Bundlern (z.B. webpack) oder Frameworks (z.B. Angular) generiert. Es hat länger gedauert, die Ursache eines Fehlers zu ermitteln.

Im Hintergrund werden Drittanbieter-Scripts in den Entwicklertools anhand des neuen Attributs x_google_ignoreList in Quellzuordnungen ignoriert. Frameworks und Bundler müssen diese Informationen bereitstellen. Fallstudie: Besseres Angular-Debugging mit DevTools

Wenn Sie lieber immer vollständige Stacktraces sehen möchten, können Sie die Einstellung über Einstellungen > Ignorieren-Liste > Bekannte Drittanbieterskripts automatisch der Ignorieren-Liste hinzufügen deaktivieren.

Chromium-Fehler: 1323199

Verbesserter Aufrufstapel beim Debuggen

Wenn Sie die Einstellung Bekannte Drittanbieterskripts automatisch der Ignorieren-Liste hinzufügen aktivieren, werden im Aufrufstack nur Frames angezeigt, die für Ihren Code relevant sind.

Öffnen Sie diese Demo und legen Sie einen Haltepunkt in der Funktion increment() in app.component.ts fest. Klicken Sie auf der Seite auf die Schaltfläche zum Erhöhen des Werts, um den Haltepunkt auszulösen. Der Aufrufstack enthält nur Frames aus Ihrem Code (z.B. app.component.ts und button.component.ts).

Wenn Sie alle Frames sehen möchten, aktivieren Sie Frames auf der Ignorierliste anzeigen. Bisher wurden in den DevTools standardmäßig alle Frames angezeigt.

Chromium-Fehler: 1352488

Quellen auf der Ignorieren-Liste im Quellenbereich ausblenden

Aktivieren Sie Quellen auf der Ignorieren-Liste ausblenden, um irrelevante Dateien im Bereich Navigation auszublenden. So können Sie sich ganz auf Ihren Code konzentrieren.

Öffnen Sie diese Demo. Im Bereich Quellen. node_modules und webpack sind die Drittanbieter-Skripts. Klicken Sie auf das Dreipunkt-Menü und wählen Sie Quellen auf der Ignorierliste ausblenden aus, um sie aus dem Bereich zu entfernen.

Chromium-Fehler: 1352488

Dateien auf der Ignorierliste im Befehlsmenü ausblenden

Mit der Einstellung Ignorierte Quellen ausblenden können Sie Ihre Datei im Befehlsmenü schneller finden. Bisher wurden bei der Suche nach Dateien im Befehlsmenü auch Dateien von Drittanbietern zurückgegeben, die für Sie möglicherweise nicht relevant sind.

Aktivieren Sie beispielsweise die Einstellung Quellen auf der Ignorierliste ausblenden und klicken Sie auf das Dreipunkt-Menü. Wählen Sie Datei öffnen aus. Geben Sie „ton“ ein, um nach Schaltflächenkomponenten zu suchen. Bisher enthielten die Ergebnisse Dateien aus node_modules. Eine der node_modules-Dateien wurde sogar als erstes Ergebnis angezeigt.

Chromium-Fehler: 1336604

Neuer Interaktions-Track im Bereich „Leistung“

Mit dem neuen Interaktionen-Track im Bereich Leistung können Sie Interaktionen visualisieren und potenzielle Probleme mit der Reaktionsfähigkeit aufspüren.

Sie können beispielsweise auf dieser Demoseite eine Leistungsaufzeichnung starten. Klicken Sie auf eine Kaffeetasse, um die Aufnahme zu beenden. Im Track Interactions (Interaktionen) werden zwei Interaktionen angezeigt. Beide Interaktionen haben dieselben IDs, was darauf hindeutet, dass sie durch dieselbe Nutzerinteraktion ausgelöst wurden.

Chromium-Fehler: 1347390

Aufschlüsselung der LCP-Zeiten im Bereich „Leistungsstatistiken“

Im Bereich Leistungsstatistiken wird jetzt die Aufschlüsselung der Zeitangaben für den Largest Contentful Paint (LCP) angezeigt. Anhand dieser Zeitangaben können Sie die LCP-Leistung nachvollziehen und Verbesserungsmöglichkeiten ermitteln.

Chromium-Fehler: 1351735

Standardname für Aufzeichnungen im Rekorder-Steuerfeld automatisch generieren

Im Bereich Rekorder wird jetzt automatisch ein Name für neue Aufnahmen generiert.

Chromium-Fehler: 1351383

Sonstige Highlights

• Bisher wurden Rekorder-Erweiterungen gelegentlich nicht im Rekorder-Bereich angezeigt. (1351416)
• Im Bereich Stile wird jetzt eine Farbauswahl für die stop-color-Property des SVG-Elements <stop> angezeigt. (1351096)
• Im Bereich Leistungsstatistiken können Sie Skripts, die Layout-Thrashing verursachen, als potenzielle Ursachen für Layout Shifts identifizieren. (1343019)
• Den kritischen Pfad für LCP-Webfonts im Bereich Leistungsstatistiken anzeigen (1350390)

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.