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 z Angular, React und Vue.js, die jetzt eine interaktive und vereinfachte Konsole zum Visualisieren und Debuggen haben ihren Code.

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

Laden Sie Chrome herunter, um die neuen Updates für Chrome 106 voll auszunutzen Kanarienvogel, Entwickler, oder Beta -Versionen als Standard-Entwicklungsbrowser. 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.

instagram viewer

1. Dateien gruppiert nach erstellt/bereitgestellt

Sie können jetzt direkt zu Ihren Anwendungskomponenten navigieren, indem Sie Dateien unter gruppieren verfasst/bereitgestellt auf der Quelle Tafel. Gehe zu Quelle > 3-Punkt-Menü > Gruppieren nach Verfasst/Bereitgestellt. Wenn Sie die Dateien jetzt öffnen, können Sie nur Ihre bereitgestellten Dateien im Bereich sehen.

In früheren Chrome-Versionen waren alle Quellcodedateien in der sichtbar Navigation Panel, was es schwierig macht, 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 Spickzettel für die Google-Suche. Um diese Einstellung zu konfigurieren, gehen Sie zu 3-Punkt-Menü > Quellen der Ignorierliste 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 > Liste ignorieren > Bekannte Skripte von Drittanbietern automatisch hinzufügen auf die Ignore-Liste. Wenn Sie die Dateien erneut öffnen, zeigt die Konsole nur relevante Dateien an, die Ihrer Anwendung zugeordnet sind. Sie können Ihren Code jetzt ungestört sehen.

4. Detaillierte Stack-Traces

Dank einer neuen Funktion in Chrome 106 brauchen Sie weniger Zeit, um einen Fehler auf 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 eine konfiguriert console.createTask() Methode in Chrome 106. Diese Methode ermöglicht es Frameworks, Stack-Traces auf der Konsole auszuführen. Das Debuggen von JavaScript mit devtools ist genauso einfach wie Debuggen von CSS mit Chrome.

5. Verfolgen Sie Interaktionen im Leistungsbereich

Verfolgen Sie neue Interaktionen in der Leistung Panel, um potenzielle Reaktionsprobleme 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. LCP-Timing-Einblicke im Leistungsbereich

Der Größte zufriedene Farbe (LCP) Timing-Details sind jetzt auf der verfügbar Performance-Insights-Panel. 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.

Navigieren Sie zu, um die Einblicke anzuzeigen Leistungsfeld>3-Punkt-Menü-Mehr Maut>Leistungseinblicke. Wenn Sie eine Aufnahme wiedergeben, wird die Einzelheiten Das Bedienfeld zeigt die Ladezeiten an.

Zusätzliche Updates in Chrome 106

Weitere Verbesserungen an Chrome 106 sind:

  • Sie können Ihre Drehbuchaufnahmen ohne Probleme aus dem exportieren Recorder Tafel. Die Export-Schaltfläche hatte in früheren Versionen ein Problem.
  • Sie haben jetzt eine Farbauswahl in der Stile pane SVG-Elemente.
  • Sie können Skripte identifizieren, die Ihr Layout in der verzerren Leistungseinblicke Tafel.
  • Sie können Pfade für LCP-Webfonts in der anzeigen Leistungseinblicke Tafel.

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, die ermöglicht es Ihnen, Dateien auszublenden, Skripte zu deaktivieren, aufzuzeichnen und eine detaillierte Ansicht Ihrer Anwendung zu erhalten Debuggen.

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.