Neuerungen in den Entwicklertools (Chrome 106)

Jecelyn Yeen

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

Die Option Dateien nach „Erstellt“/„Bereitgestellt“ wird jetzt unter dem Dreipunkt-Menü angezeigt. Bisher wurde sie direkt im Navigationsbereich angezeigt.

Öffnen Sie diese Demo. Aktivieren Sie die Einstellung Dateien nach „Erstellt“/„Bereitgestellt“, um zuerst Ihren ursprünglichen Quellcode (Autorisiert) anzusehen und ihn schneller aufzurufen.

Dateien nach „Erstellt“/„Bereitgestellt“ gruppieren

Chromium-Programmfehler: 1352488

Verbesserte Stacktraces

Verknüpfte Stacktraces für asynchrone Vorgänge

Wenn einige Vorgänge asynchron geplant sind, erzählen die Stacktraces in den Entwicklertools jetzt die ganze Geschichte des Vorgangs. Bisher wurde nur ein Teil der Geschichte erzählt.

Öffnen Sie beispielsweise diese Demo und klicken Sie auf die Schaltfläche zum Erhöhen der Anzahl. 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 das Zeitlimit angezeigt. Die „Grundursache“ des Vorgangs wurde nicht angezeigt.

Mit den neuesten Änderungen zeigen die Entwicklertools jetzt an, dass der Vorgang vom onClick-Ereignis in der Schaltflächenkomponente, dann über die increment-Funktion und schließlich vom Zeitlimitvorgang ausgeht.

Verknüpfte Stacktraces für asynchrone Vorgänge

Die Entwicklertools haben eine neue Funktion für das asynchrone Tagging von Stacks eingeführt. Sie können die ganze Geschichte des Vorgangs erzählen, indem Sie beide Teile des asynchronen Codes mit der neuen console.createTask()-Methode verknüpfen. Weitere Informationen finden Sie unter Moderne Fehlerbehebung in Entwicklertools.

Klingt das kompliziert? Keineswegs. In den meisten Fällen übernimmt das von Ihnen verwendete Framework die Planung und die asynchrone Ausführung. In diesem Fall liegt es an dem Framework, die API zu verwenden, und Sie müssen sich darüber keine Gedanken machen. (Beispiel: Angular hat diese Änderungen implementiert.)

Chromium-Programmfehler: 1334585

Bekannte Drittanbieterskripts automatisch ignorieren

Da die Entwicklertools jetzt automatisch bekannte Drittanbieterskripts der Ignorierliste hinzufügen, kannst du Probleme in deinem Code schneller beim Debugging erkennen.

Öffnen Sie diese Demo und klicken Sie auf die Schaltfläche zum Erhöhen der Anzahl. Maximieren Sie die Fehlermeldung in der Console. Der Stacktrace zeigt nur Ihren Code an (z.B. app.component.ts button.component.ts). Klicken Sie auf Mehr Frames anzeigen, um den vollständigen Stacktrace zu sehen.

Zuvor enthielt der Stacktrace Drittanbieterskripts wie zone.js und core.mjs. Dabei handelt es sich nicht um Ihren Quellcode, sondern um einen Bundler (z.B. Webpack) oder Frameworks (z.B. Angular). Es hat länger gedauert, um die Ursache eines Fehlers zu finden.

Bekannte Drittanbieterskripts im Stacktrace automatisch ignorieren

Die Entwicklertools ignorieren Drittanbieterskripts basierend auf der neuen x_google_ignoreList-Eigenschaft in Source Maps. Frameworks und Bundler müssen diese Informationen bereitstellen. Siehe Fallstudie: Besseres Angular-Debugging mit Entwicklertools.

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

Einstellung zum automatischen Hinzufügen bekannter Drittanbieterskripts zur Ignorieren-Liste

Chromium-Programmfehler: 1323199

Verbesserter Aufrufstack bei der Fehlerbehebung

Mit der Einstellung Automatisch bekannte Drittanbieter-Skripts zur Ignorieren-Liste hinzufügen zeigt der Aufrufstack jetzt nur Frames an, die für Ihren Code relevant sind.

Öffnen Sie diese Demo und legen Sie einen Haltepunkt an der Funktion increment() in app.component.ts fest. Klicken Sie auf die Schaltfläche zum Inkrementieren der Seite, um den Haltepunkt auszulösen. Der Aufrufstack zeigt nur Frames aus Ihrem Code an (z.B. app.component.ts und button.component.ts).

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

Verbesserter Aufrufstack bei der Fehlerbehebung

Chromium-Programmfehler: 1352488

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

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

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

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

Chromium-Programmfehler: 1352488

Mit der Einstellung Quellen auf der Ignorierliste ausblenden können Sie Ihre Datei über das Befehlstaste schneller finden. Wenn Sie bisher über das Befehlsmenü nach Dateien suchen, werden 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 enthalten die Ergebnisse Dateien von node_modules, eine der node_modules-Dateien wurde sogar als erstes Ergebnis angezeigt.

Dateien auf der Ignorieren-Liste im Befehlsmenü ausblenden

Chromium-Programmfehler: 1336604

Neuer Interaktions-Track im Steuerfeld „Leistung“

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

Sie können beispielsweise auf dieser Demoseite eine Leistungsaufzeichnung starten. Klicken Sie auf einen Kaffee und beenden Sie die Aufzeichnung. Im Track Interaktionen werden zwei Interaktionen angezeigt. Beide Interaktionen haben dieselben IDs, was darauf hinweist, dass die Interaktionen durch dieselbe Nutzerinteraktion ausgelöst werden.

Interaktions-Tracking im Bereich „Leistung“

Chromium-Programmfehler: 1347390

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

Im Bereich Leistungsstatistiken wird jetzt die Zeitaufschlüsselung des Largest Contentful Paint (LCP) angezeigt. Anhand dieser Zeitinformationen können Sie herausfinden, wie sich die LCP-Leistung verbessern lässt, und erkennen, wie sich diese Leistung verbessern lässt.

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

Chromium-Programmfehler: 1351735

Standardnamen für Aufnahmen im Bereich „Rekorder“ automatisch generieren

Im Bereich Rekorder wird jetzt automatisch ein Name für neue Aufnahmen erstellt.

Standardname für Aufnahmen im Rekorder-Bereich

Chromium-Programmfehler: 1351383

Sonstige Highlights

  • Bisher wurden Rekorder-Erweiterungen nicht gelegentlich im Steuerfeld Rekorder angezeigt. 1351416
  • Im Bereich Styles wird jetzt eine Farbauswahl für die stop-color-Eigenschaft des SVG-Elements <stop> angezeigt. (1351096)
  • Ermitteln Sie im Bereich Leistungsstatistiken Skripts, die Layoutprobleme als mögliche Ursachen für Layoutverschiebungen verursachen. (1343019)
  • Den kritischen Pfad für LCP-Webschriftarten wird im Bereich Leistungsstatistiken angezeigt. (1350390)

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.

Neu in den Entwicklertools

Hier finden Sie eine Liste aller Neuerungen in den Entwicklertools, die behandelt wurden.

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 Erste Schritte

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 abgebrochen.

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