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.
Demo öffnen 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 Entwicklertools jetzt die vollständige 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. Mit der neuen Methode console.createTask() können Sie die gesamte Geschichte des Vorgangs erzählen, indem Sie beide Teile des asynchronen Codes 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ügen.
Öffnen Sie diese Demo und klicken Sie auf die Schaltfläche zum Erhöhen des Werts. 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 Callstack 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.
Demo öffnen 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, wobei eine der node_modules-Dateien sogar als erstes Ergebnis angezeigt wurde.
Chromium-Fehler: 1336604
Neuer Track „Interaktionen“ 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 Interactions-Track 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