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 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. Bisher 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 increment-Funktion und vom Zeitlimitvorgang ausgelöst wurde.

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? Keineswegs. 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.

Optional: Wenn Sie immer die vollständigen Stacktraces anzeigen möchten, können Sie die Einstellung unter Einstellungen > Ignorieren-Liste > Bekannte Drittanbieter-Skripts automatisch zur Ignorieren-Liste automatisch hinzufügen deaktivieren.

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 diese 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 Scripts, die Layout-Thrashing verursachen, als mögliche Ursachen für Layoutverschiebungen identifizieren. (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.
  • Melde ein Problem mit den Entwicklertools über Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden in den Entwicklertools.
  • 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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 wurde gekündigt.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59