Google erleichtert das Debuggen mit neuen Funktionen in Devtools Chrome 106

Das Debuggen kann mühsam und noch frustrierender sein, wenn Sie den Fehler nicht einfach finden können. Chrome 106-Entwicklertools (devtools) sind so eingestellt, dass sie den Debugging-Prozess vereinfachen und ihn einfacher und schneller machen.

Sie können jetzt Dateien einfach sortieren, Ihre Suche optimieren, Skripte von Drittanbietern ausblenden, auf detaillierte Leistungsberichte zugreifen und vieles mehr, was in diesem Artikel beschrieben wird. Diese Entwicklungstools sind unerlässlich, insbesondere für Entwickler, die mit JavaScript-Frameworks wie Angular, React und Vue.js arbeiten, die jetzt über eine interaktive und vereinfachte Konsole zum Visualisieren und Debuggen ihres Codes verfügen.

Lassen Sie uns einen genaueren Blick auf einige dieser neuen Funktionen werfen:

Um von den neuen Updates für Chrome 106 voll zu profitieren, laden Sie die Chrome Canary-, Dev- oder Beta – Versionen als Standard-Entwicklungsbrowser herunter. Sie haben Zugriff auf die neuesten Entwicklertools, mit denen Sie Webplattform-APIs testen und Probleme oder Fehler auf Ihrer Website schnell identifizieren können, um sicherzustellen, dass Ihre Benutzer das beste Kundenerlebnis haben.

Sie können jetzt direkt zu Ihren Anwendungskomponenten navigieren, indem Sie Dateien unter „Authored/Deployed“ im Quellbereich gruppieren. Gehen Sie zu Source > 3-dot-menu > Group by Authored/Deployed. Wenn Sie die Dateien jetzt öffnen, können Sie nur Ihre bereitgestellten Dateien im Bereich sehen.

In früheren Chrome-Versionen waren alle Quellcodedateien im Navigationsbereich sichtbar, was es schwierig machte, eine einzelne Datei zu finden.

2 Vereinfachte Dateisuche

Sie können Ihre Suche im Quellenbereich nur auf relevante Dateien beschränken. In früheren Versionen von Chrome wurden vom Framework und anderen Drittanbietern generierte Dateien in den Suchergebnissen angezeigt, was die Identifizierung des Suchbegriffs erschwerte.

Dieses Update ist die devtools-Version zur Optimierung Ihrer Suche in Webbrowsern mit Google-Such-Spickzetteln. Um diese Einstellung zu konfigurieren, gehen Sie zum 3-Punkt-Menü > Quellen der Ignorierliste ausblenden.

3 Skripte von Drittanbietern ausblenden

Skripte von Drittanbietern, die Ihre Konsole füllen? Chrome 106 hat eine Ignore-List-Erweiterung in der Quellkarte hinzugefügt, damit Sie Skripte ausblenden können, die automatisch von Frameworks und anderen Drittanbietern generiert wurden.

Um diese Funktion zu aktivieren, gehen Sie zu Einstellungen > Ignorierliste > Bekannte Skripte von Drittanbietern automatisch zur Ignorierliste hinzufügen. Wenn Sie die Dateien erneut öffnen, zeigt die Konsole nur relevante Dateien an, die Ihrer Anwendung zugeordnet sind. Sie können Ihren Code jetzt ohne Ablenkung sehen.

4 detaillierte Stack-Traces

Dank einer neuen Funktion in Chrome 106 benötigen Sie weniger Zeit, um einen Fehler in der Konsole zu identifizieren. Die Chrome-Entwicklertools geben Ihnen einen detaillierten Überblick über asynchrone Vorgänge und ihre Ursachen. In früheren Versionen waren nur die Ereignisse sichtbar, die zu der Operation geführt haben. Die neuesten devTools zeigen die gesamte Operationskette und ihre Ursachen.

Google hat in Chrome 106 eine Methode console.createTask() konfiguriert. Diese Methode ermöglicht es Frameworks, Stacktraces auf der Konsole durchzuführen. Das Debuggen von JavaScript mit devtools ist genauso einfach wie das Debuggen von CSS mit Chrome.

5 Verfolgen Sie Interaktionen im Leistungsbereich

Verfolgen Sie neue Interaktionen im Leistungsbereich, um potenzielle Probleme mit der Reaktionsfähigkeit Ihrer Anwendung zu identifizieren. In Chrome 106 werden alle Interaktionen nach einem Vorgang in der Interaktionsspur angezeigt. Der Track zeigt die Quelle der Interaktionen und ihre IDs. Tracking hilft, die Quelle zu identifizieren und entsprechend abzufangen.

6 Einblicke in das LCP-Timing im Leistungsbereich

Die Timing-Details zum Largest Contentful Paint (LCP) sind jetzt im Bereich „ Performance Insights “ verfügbar. LCP ist eine wichtige Webleistungsmetrik, die über die Renderzeit von Bildern oder Textblöcken berichtet, die zum Laden auf der Webseite benötigt werden. 2,5 Sekunden oder weniger sind eine gute Leistungsbewertung.

Um die Einblicke anzuzeigen, navigieren Sie zum Leistungsbereich>3-Punkt-Menü-mehr Mautgebühren>Leistungseinblicke. Wenn Sie eine Aufzeichnung wiedergeben, zeigt das Detailfenster die Ladezeiten an.

Zusätzliche Updates in Chrome 106

Zu den weiteren Verbesserungen von Chrome 106 gehören:

• Sie können Ihre Skriptaufzeichnungen problemlos aus dem Recorder -Bedienfeld exportieren. Die Export-Schaltfläche hatte in früheren Versionen ein Problem.
• Sie haben jetzt eine Farbauswahl in den SVG-Elementen des Stilbereichs.
• Sie können Skripte, die Ihr Layout verzerren, im Bedienfeld „Leistungseinblicke“ identifizieren.
• Sie können Pfade für LCP-Webfonts im Bereich Performance Insights anzeigen .

Diese Funktionen können die Verwendung der Entwicklungstools des Browsers verbessern.

Was Sie von Chrome 106 bekommen

Die neuesten Verbesserungen an devtools in Chrome 106 beschleunigen den Debugging-Prozess. Die neuen Updates erleichtern die Visualisierung von Vorgängen durch eine vereinfachte und dynamische Konsole, mit der Sie Dateien ausblenden, Skripts deaktivieren, aufzeichnen und beim Debuggen eine detaillierte Ansicht Ihrer Anwendung erhalten können.

Mit den Ergänzungen von Chrome 106 können Sie Ihre Anwendung verwalten und ihre Leistung optimieren. Fahren Sie fort und genießen Sie diese Vorteile, indem Sie auf die neueste Version von Chrome 106 aktualisieren.