Neuerungen in den Entwicklertools (Chrome 106)

Jecelyn Yeen

Dateien im Bereich „Quellen“ nach „Erstellt“/„Bereitgestellt“ gruppieren

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

Öffnen Sie diese Demo. Aktivieren Sie die Einstellung Dateien nach Autor / Bereitgestellt gruppieren, um zuerst den ursprünglichen Quellcode (Autor) aufzurufen und schneller zu den gewünschten Dateien zu gelangen.

Dateien nach „Erstellt“/„Bereitgestellt“ gruppieren

Chromium-Fehler: 1352488

Verbesserte Stack-Traces

Verknüpfte Stack-Traces für asynchrone Vorgänge

Wenn einige Vorgänge asynchron ausgeführt werden, geben die Stack-Traces in den DevTools jetzt den gesamten Ablauf des Vorgangs an. Bisher war das nur ein Teil der Wahrheit.

Öffnen Sie beispielsweise diese Demo und klicken Sie auf die Schaltfläche „Increment“ (Hinzufügen). 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 Stack-Trace nur der Vorgang mit Zeitüberschreitung angezeigt. Die „Ursache“ des Vorgangs wurde nicht angezeigt.

Nach den letzten Änderungen wird in den DevTools jetzt angezeigt, dass der Vorgang vom onClick-Ereignis in der Schaltflächenkomponente, dann von der increment-Funktion und schließlich vom Zeitüberschreitungsvorgang stammt.

Verknüpfte Stack-Traces für asynchrone Vorgänge

In DevTools wurde die neue Funktion „Async Stack Tagging“ eingeführt. Sie können den gesamten Vorgang beschreiben, indem Sie beide Teile des asynchronen Codes mit der neuen console.createTask()-Methode verknüpfen. Weitere Informationen finden Sie unter Modernes Debuggen in DevTools.

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

Chromium-Fehler: 1334585

Bekannte Drittanbieter-Scripts automatisch ignorieren

Sie können Probleme in Ihrem Code beim Debuggen schneller erkennen, da bekannte Drittanbieterskripts jetzt automatisch der Ignorieren-Liste in den DevTools hinzugefügt werden.

Öffnen Sie diese Demo und klicken Sie auf die Schaltfläche „Increment“ (Hinzufügen). 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 Stack-Trace Scripts von Drittanbietern wie zone.js und core.mjs. Dies ist nicht Ihr Quellcode, sondern wird von Bundlern (z.B. Webpack) oder Frameworks (z.B. Angular) generiert. Es hat länger gedauert, die Ursache eines Fehlers zu ermitteln.

Bekannte Drittanbieterscripts im Stack-Trace automatisch ignorieren

In den Entwicklertools werden Drittanbieter-Scripts basierend auf dem neuen Attribut x_google_ignoreList in Quellzuordnungen ignoriert. Diese Informationen müssen von Frameworks und Bundlern bereitgestellt werden. Weitere Informationen finden Sie in der Fallstudie: Besseres Angular-Debugging mit DevTools.

Wenn Sie sich lieber immer vollständige Stack-Traces ansehen möchten, können Sie die Einstellung unter Einstellungen > Ignorieren-Liste > Bekannte Drittanbieterskripts automatisch der Ignorieren-Liste hinzufügen deaktivieren.

Einstellung, mit der bekannte Drittanbieterskripts automatisch der Ignorierliste hinzugefügt werden

Chromium-Fehler: 1323199

Verbesserter Aufrufstapel während der Fehlerbehebung

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

Öffnen Sie diese Demo und legen Sie einen Haltepunkt bei der Funktion increment() in app.component.ts fest. Klicken Sie auf der Seite auf die Schaltfläche „Erhöhen“, um den Haltepunkt zu aktivieren. 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.

Verbesserter Aufrufstapel während der Fehlerbehebung

Chromium-Fehler: 1352488

Quellen auf der Ignorieren-Liste im Bereich „Quellen“ 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-Scripts. Klicken Sie auf das Dreipunkt-Menü und wählen Sie Ignorierte Quellen ausblenden aus, um sie im Bereich auszublenden.

Quellen auf der Ignorieren-Liste im Bereich „Quellen“ ausblenden

Chromium-Fehler: 1352488

Wenn Sie die Einstellung Ausgeblendete Quellen in der Ignorierliste ausblenden aktivieren, können Sie die Datei über das 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 In der Ignorierliste enthaltene Quellen 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 von node_modules. Eine der node_modules-Dateien wurde sogar als erstes Ergebnis angezeigt.

Dateien auf der Ignorierliste im Befehlsmenü ausblenden

Chromium-Fehler: 1336604

Neuer Messwert „Interaktionen“ im Bereich „Leistung“

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

Starten Sie beispielsweise eine Leistungsaufzeichnung auf dieser Demoseite. Klicken Sie auf einen Kaffee und beenden Sie die Aufnahme. Im Interaktionen-Track werden zwei Interaktionen angezeigt. Beide Interaktionen haben dieselbe ID, was darauf hinweist, dass sie durch dieselbe Nutzerinteraktion ausgelöst wurden.

Interaktionen im Bereich „Leistung“

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 Informationen zur Zeit können Sie die LCP-Leistung analysieren und Verbesserungsmöglichkeiten ermitteln.

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

Chromium-Fehler: 1351735

Automatisch einen Standardnamen für Aufnahmen im Bereich „Aufzeichnung“ generieren

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

Standardname für Aufnahmen im Bereich „Aufzeichnung“

Chromium-Fehler: 1351383

Sonstige Highlights

  • Bisher wurden Erweiterungen für den Rekorder gelegentlich nicht im Bereich Rekorder angezeigt. (1351416)
  • Im Bereich Stile wird jetzt eine Farbauswahl für die Property stop-color des SVG-Elements <stop> angezeigt. (1351096)
  • Im Bereich Leistungsstatistiken können Sie Scripts identifizieren, die Layout-Überlastungen verursachen und somit als mögliche Ursachen für Layout-Shifts infrage kommen. (1343019)
  • Im Bereich Leistungsstatistiken wird der kritische Pfad für LCP-Webschriften angezeigt. (1350390)

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.