Neuerungen in den Entwicklertools (Chrome 106)

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 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 Stacktraces für asynchrone Vorgänge

Wenn einige Vorgänge asynchron ausgeführt werden, geben die Stacktraces in den Entwicklertools jetzt einen vollständigen Überblick über den Vorgang. Zuvor erzählt sie nur einen Teil der Geschichte.

Öffnen Sie zum Beispiel diese demo und klicken Sie auf die Schaltfläche „Inkrementieren“. Maximieren Sie die Fehlermeldung in Console. In unserem Quellcode umfasst 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

Im Hintergrund wurde mit den Entwicklertools 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 Debugging in den Entwicklertools.

Klingt das kompliziert? Nein. Meistens übernimmt das Framework, das Sie verwenden, die Planung und die 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-Skripts 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 Console. Der Stacktrace zeigt nur Ihren Code (z.B. app.component.ts button.component.ts). Klicken Sie auf Mehr Frames anzeigen, um den vollständigen Stacktrace zu sehen.

Bisher enthielt der Stacktrace Drittanbieterskripts wie zone.js und core.mjs. Dies ist nicht Ihr Quellcode. Sie werden von Bundler (z. B. Webpack) oder Frameworks (z. B. Angular) generiert. Es hat länger gedauert, die Ursache eines Fehlers zu ermitteln.

Bekannte Drittanbieterskripte im Stacktrace automatisch ignorieren

Im Hintergrund ignoriert die Entwicklertools Drittanbieter-Skripts, die auf dem neuen Attribut x_google_ignoreList in Quellzuordnungen basieren. Frameworks und Bundler müssen diese Informationen bereitstellen. Siehe Fallstudie: Besseres Angular-Debugging mit Entwicklertools.

Wenn Sie lieber immer die vollständigen Stacktraces sehen möchten, können Sie die Einstellung unter Einstellungen > Ignorierliste > Bekannte Drittanbieter-Skripts automatisch der Ignorieren-Liste hinzufügen:

Einstellung zum automatischen Hinzufügen bekannter Drittanbieter-Skripts zur Ignorieren-Liste

Chromium-Fehler: 1323199

Verbesserter Aufrufstack während der Fehlerbehebung

Mit der Einstellung Bekannte Drittanbieter-Skripts automatisch zur Ignorierliste hinzufügen werden im Aufrufstack jetzt 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 Erhöhung, um den Haltepunkt auszulösen. Im Aufrufstack werden nur Frames aus Ihrem Code angezeigt (z.B. app.component.ts und button.component.ts).

Wenn Sie alle Frames sehen möchten, aktivieren Sie Frames auf der Ignorieren-Liste anzeigen. Bisher wurden in den Entwicklertools standardmäßig alle Frames angezeigt.

Verbesserter Aufrufstack während der Fehlerbehebung

Chromium-Fehler: 1352488

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

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

Öffnen Sie demo. Im Bereich Quellen. node_modules und webpack sind die Skripts von Drittanbietern. Klicken Sie auf das Dreipunkt-Menü und wählen Sie Quellen auf der Ignorieren-Liste ausblenden aus, um sie auszublenden.

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

Chromium-Fehler: 1352488

Mit der Einstellung Quellen auf der Ignorieren-Liste ausblenden können Sie die Datei über das Befehlsmenü schneller finden. Bisher wurden bei der Suche im Befehlsmenü Dateien von Drittanbietern zurückgegeben, die für Sie möglicherweise nicht relevant sind.

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

Dateien, die auf der Ignorierliste aufgeführt sind, im Befehlsmenü ausblenden

Chromium-Fehler: 1336604

Neuer Interaktions-Track im Bereich „Leistung“

Mit dem neuen Track Interaktionen im Bereich Leistung können Sie Interaktionen visualisieren und potenzielle Probleme bei der Reaktionszeit ermitteln.

Starten Sie beispielsweise eine Leistungsaufzeichnung auf dieser Demoseite. Klicke auf einen Kaffee und beende die Aufnahme. Im Track Interaktionen werden zwei Interaktionen angezeigt. Beide Interaktionen haben die gleichen IDs, d. h., die Interaktionen werden von derselben Nutzerinteraktion ausgelöst.

Interaktionen im Bereich „Leistung“

Chromium-Fehler: 1347390

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

Im Bereich Leistungsstatistiken wird jetzt eine Zeitaufschlüsselung des Largest Contentful Paint (LCP) angezeigt. 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

Im Rekorder-Bereich automatisch Standardnamen für Aufzeichnungen generieren

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

Standardname für Aufzeichnungen im Bereich „Rekorder“

Chromium-Fehler: 1351383

Verschiedene Highlights

  • Bisher wurden Rekorder-Erweiterungen 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 Skripts als mögliche Ursachen für Layoutverschiebungen erkennen. (1343019)
  • Rufen Sie im Bereich Leistungsstatistiken den kritischen Pfad für LCP-Webschriftarten auf. (1350390)

Vorschaukanäle herunterladen

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine 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 Mehr > 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