Wenn Sie Chrome 111 oder höher verwenden, ist Ihnen vielleicht schon aufgefallen, dass wir das Design der Seitenleiste für die Unterbrechungspunkte geändert haben. Mit Chrome 113 wird das alte Design vollständig durch die neue Seitenleiste ersetzt. Mit dem Redesign wollten wir den Workflow für Unterbrechungen verbessern. Dazu haben wir Folgendes getan:
Sie erhalten eine bessere Übersicht über alle festgelegten Haltestellen. Häufige Nutzerabläufe mit Unterbrechungen einfacher zugänglich und intuitiver zu gestalten. Coole vorhandene Funktionen für Unterbrechungen sichtbar machen
In diesem Beitrag wird davon ausgegangen, dass Sie mit dem Debuggen mithilfe von Haltepunkten vertraut sind. Wenn Sie noch keine Haltestellen verwendet haben, finden Sie hier eine Übersicht, wie Sie mithilfe von Haltestellen Ihren Code debuggen können.
Sehen wir uns nun an, was das Redesign bietet und wie du die neue Seitenleiste nutzen kannst. Beim Redesign liegt der Schwerpunkt darauf, die vorhandenen Funktionen intuitiver und leichter zugänglich zu machen, anstatt neue Funktionen hinzuzufügen.
Bei Ausnahmen anhalten, um zu ermitteln, warum ein Fehler auftritt
Löst Ihr Code eine Ausnahme aus? Keine Sorge! Mit den Chrome-Entwicklertools können Sie die Ausführung bei Ausnahmen pausieren, um sie an dem Punkt zu beenden, an dem die Ausnahme ausgelöst wird. So können Sie die Umstände untersuchen und besser nachvollziehen, unter denen Ihr Code einen Fehler auslöst. Sie können auswählen, ob Sie die Ausführung bei aufgefangenen oder nicht aufgefangenen Ausnahmen pausieren möchten. Setzen Sie dazu in der Seitenleiste ein Häkchen in das entsprechende Kästchen.
Sie können die Unterbrechungen verwalten, indem Sie relevante Unterbrechungsgruppen maximieren und andere minimieren, um sich auf das Wesentliche zu konzentrieren.
Haltestellen können auf mehrere Dateien verteilt sein. In der Seitenleiste für Haltestellen werden Haltestellen nach der Datei gruppiert, zu der sie gehören. Konzentrieren Sie sich nur auf die, die für Ihre aktuelle Debugging-Sitzung wichtig sind, indem Sie die entsprechenden Gruppen von Haltepunkten maximieren und die übrigen minimieren.
Haltepunkte verwalten: Mit nur einem Klick zum Code springen, Haltepunkte entfernen oder aktivieren/deaktivieren
In der Seitenleiste für Haltestellen können Sie gängige Aufgaben mit nur einem Klick erledigen. Hier ist eine Übersicht darüber, wie Sie…
Gehen Sie im Code-Editor zum Ort des Haltepunkts. Entfernen Sie einen oder alle Haltepunkte in einer Datei. Sie können einen oder alle Haltepunkte in einer Datei aktivieren oder deaktivieren.
Und das alles mit nur einem Klick! Diese Optionen sind natürlich auch im Kontextmenü verfügbar:
Zum Haltepunkt springen, indem Sie auf das Code-Snippet für den Haltepunkt klicken
Möchten Sie prüfen, wo Sie den Haltepunkt im Code gesetzt haben, und den umgebenden Code analysieren? Klicken Sie einfach in der Seitenleiste auf das Code-Snippet eines Haltepunkts, um den Code-Speicherort im Code-Editor zu öffnen.
Sie können einen einzelnen oder alle Haltepunkte in einer Datei entfernen, indem Sie auf die Schaltfläche „Entfernen“ klicken.
Bewegen Sie den Mauszeiger auf einen Haltepunkt oder eine Haltepunktgruppe, um die Schaltfläche „Entfernen“ aufzurufen. Mit einem Klick darauf werden ein einzelner oder alle Haltepunkte in einer Datei entfernt.
Einzelne oder alle Haltepunkte in einer Datei deaktivieren
Klicken Sie das Kästchen neben einem Haltepunkt an oder entfernen Sie das Häkchen, um ihn zu aktivieren oder zu deaktivieren.
Wenn Sie alle Haltepunkte in einer Datei aktivieren oder deaktivieren möchten, bewegen Sie den Mauszeiger auf die Haltepunktgruppe und setzen oder entfernen Sie das Häkchen neben dem Dateinamen.
Weniger bekannte Haltepunktfunktionen nutzen: bedingte Haltepunkte und Logpoints
Haltepunktbedingungen bearbeiten oder Logpoint-Protokoll ändern
Wenn Sie eine Unterbrechungsbedingung oder ein Protokoll bearbeiten möchten, bewegen Sie den Mauszeiger auf einen Unterbrechungspunkt und klicken Sie auf die Schaltfläche Bearbeiten. Daraufhin wird ein Dialogfeld geöffnet, in dem Sie den Typ und die Details des Markierungstyps ändern können.
Alternativ können Sie die Zeile des Haltepunkts im Code-Editor auswählen und unter Linux Strg + Alt + b oder unter Mac Befehlstaste + Alt + b drücken, um das Dialogfeld zum Bearbeiten des Haltepunkts zu öffnen.
Sie können auch schnell die Protokolle für Bedingungen oder Logpunkte prüfen, indem Sie den Mauszeiger in der Seitenleiste auf den Haltepunkt bewegen:
Fazit
Mit der Neugestaltung der Seitenleiste für Haltestellen wollten wir das Debuggen mit Haltestellen vereinfachen. Vor allem wollten wir die Inhalte strukturierter, leichter zugänglich und verständlicher gestalten. Wir hoffen, dass diese Verbesserungen Ihnen bei der nächsten Fehlerbehebung helfen.
Wenn du Verbesserungsvorschläge hast, sende uns bitte einen Fehlerbericht.
Vorschaukanäle herunterladen
Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Ihnen Zugriff auf die neuesten DevTools-Funktionen, ermöglichen es Ihnen, innovative Webplattform-APIs zu testen, und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.
Chrome-Entwicklertools-Team kontaktieren
Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.
- Senden Sie uns Feedback und Funktionsanfragen unter crbug.com.
- Melden Sie ein DevTools-Problem über das Dreipunkt-Menü Weitere Optionen > Hilfe > DevTools-Problem melden.
- Tweeten Sie an @ChromeDevTools.
- Hinterlassen Sie Kommentare unter den YouTube-Videos zu den Neuigkeiten in den DevTools oder den YouTube-Videos mit Tipps zu den DevTools.