Neuerungen in den Entwicklertools (Chrome 106)

Jecelyn Yeen

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

Die Option Dateien gruppieren nach erstellt / bereitgestellt wird jetzt im Dreipunkt-Menü angezeigt. Bisher wurden sie direkt im Navigationsbereich angezeigt.

Öffnen Sie diese Demo. Aktivieren Sie die Einstellung Dateien gruppieren nach erstellt / bereitgestellt, um den ursprünglichen Quellcode zuerst anzuzeigen und schneller dorthin zu gelangen.

Dateien nach „Erstellt“/„Bereitgestellt“ gruppieren

Chromium-Fehler: 1352488

Verbesserte Stacktraces

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

Wenn einige Vorgänge asynchron ausgeführt werden, geben die Stack-Traces in den Entwicklertools 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 Stacktrace nur der Zeitüberschreitungsvorgang angezeigt. Die Ursache des Vorgangs wurde nicht angezeigt.

Mit den neuesten Änderungen wird in den Entwicklertools angezeigt, dass der Vorgang vom onClick-Ereignis in der Schaltflächenkomponente, dann von der Funktion increment und vom Zeitlimitvorgang ausgeht.

Verknüpfte Stacktraces für asynchrone Vorgänge

In DevTools wurde die neue Funktion „Async Stack Tagging“ eingeführt. Sie können die ganze Geschichte des Vorgangs erzählen, indem Sie beide Teile des asynchronen Codes mit der neuen Methode console.createTask() miteinander 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 liegt es an Ihrem Framework, die API zu verwenden, und Sie müssen sich nicht darum kümmern. (Beispiel: Angular hat diese Änderungen implementiert)

Chromium-Fehler: 1334585

Bekannte Drittanbieter-Scripts automatisch ignorieren

Probleme in deinem Code während der Fehlerbehebung schneller erkennen, da die Entwicklertools jetzt automatisch bekannte Drittanbieter-Skripts zur Ignorierliste hinzufügen.

Öffnen Sie diese Demo und klicken Sie auf die Schaltfläche „Inkrementieren“. 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 zum automatischen Hinzufügen bekannter Drittanbieter-Skripts zur Ignorieren-Liste

Chromium-Fehler: 1323199

Verbesserter Aufrufstapel während der Fehlerbehebung

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

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

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 Skripts von Drittanbietern. Klicken Sie auf das Dreipunkt-Menü und wählen Sie Ignorierte Quellen ausblenden aus, um sie im Bereich auszublenden.

Quellen, die auf der Ignorieren-Liste im Quellenbereich aufgeführt sind, werden ausgeblendet.

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 angezeigt, 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 sehen Sie jetzt eine Aufschlüsselung der Zeitangaben für den Largest Contentful Paint (LCP). Anhand dieser Zeitangaben können Sie herausfinden, wie sich die Leistung des LCP verbessern lässt.

Aufschlüsselung der LCP-Timings 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 Eigenschaft stop-color des Elements SVG <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 Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs 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 DevTools

Eine Liste aller Themen, die in der Reihe Was ist neu in den DevTools? behandelt wurden.