Wenn Sie Chrome 111 oder höher verwenden, haben Sie vielleicht schon bemerkt, dass wir das Design der Haltepunkt-Seitenleiste geändert haben. Mit Chrome 113 ersetzt die neue Seitenleiste das alte Design vollständig. Mit dem Redesign wollten wir den Haltepunkt-Workflow verbessern , indem wir:
eine bessere Übersicht über alle festgelegten Haltepunkte bieten. den Zugriff auf gängige Nutzer-Workflows mit Haltepunkten erleichtern und sie intuitiver gestalten. vorhandene Haltepunkt-Funktionen sichtbar machen.
In diesem Beitrag wird davon ausgegangen, dass Sie bereits mit dem Debuggen mit Haltepunkten vertraut sind. Wenn Sie noch keine Haltepunkte verwendet haben, finden Sie in dieser Übersicht weitere Informationen dazu, wie Sie Haltepunkte zum Debuggen Ihres Codes verwenden können.
Sehen wir uns nun an, was das Redesign bietet und wie Sie die neue Seitenleiste nutzen können. Das Redesign konzentriert sich darauf, die vorhandenen Funktionen intuitiver zu gestalten und den Zugriff darauf zu erleichtern, anstatt neue Funktionen hinzuzufügen.
Bei Ausnahmen pausieren, um zu untersuchen, warum Ihr Code einen Fehler auslöst
Löst Ihr Code eine Ausnahme aus? Kein Problem! Mit den Chrome-Entwicklertools können Sie bei Ausnahmen pausieren, um die Ausführung an der Stelle zu beenden, an der die Ausnahme ausgelöst wird. So können Sie die Umstände untersuchen und besser verstehen, unter denen Ihr Code einen Fehler auslöst. Sie können auswählen, ob Sie bei abgefangenen Ausnahmen, nicht abgefangenen Ausnahmen oder beiden pausieren möchten. Dazu setzen Sie in der Seitenleiste die entsprechenden Häkchen.
Haltepunkte verwalten: Relevante Haltepunktgruppen maximieren und andere minimieren, um sich auf das Wesentliche zu konzentrieren
Haltepunkte können auf mehrere Dateien verteilt sein. In der Haltepunkt-Seitenleiste werden Haltepunkte nach der Datei gruppiert, zu der sie gehören. Konzentrieren Sie sich nur auf die Haltepunkte, die für Ihre aktuelle Debugging-Sitzung wichtig sind, indem Sie die relevanten Haltepunktgruppen maximieren und die übrigen minimieren.
Haltepunkte verwalten: Mit einem Klick zum Code springen, Haltepunkte entfernen oder aktivieren/deaktivieren
In der Haltepunkt-Seitenleiste können Sie gängige Aufgaben mit einem Klick erledigen. Hier eine Übersicht:
Zur Haltepunktposition im Code-Editor navigieren Einen oder alle Haltepunkte in einer Datei entfernen Einen oder alle Haltepunkte in einer Datei aktivieren oder deaktivieren
Und das alles mit einem Klick! Diese Optionen sind natürlich auch im Kontextmenü verfügbar:
Zum Haltepunkt springen, indem Sie auf das Haltepunkt-Code-Snippet klicken
Möchten Sie prüfen, wo im Code Sie den Haltepunkt festgelegt haben, und den umgebenden Code analysieren? Klicken Sie einfach in der Seitenleiste auf das Code-Snippet eines Haltepunkts. Die Codeposition wird dann im Code-Editor geöffnet.
Einen einzelnen Haltepunkt 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“ einzublenden. Mit einem Klick werden dann ein einzelner Haltepunkt oder alle Haltepunkte in einer Datei entfernt.
Einen einzelnen Haltepunkt oder alle Haltepunkte in einer Datei deaktivieren
Setzen Sie ein Häkchen in das Kästchen neben einem Haltepunkt oder entfernen Sie es, um den Haltepunkt 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 Sie ein Häkchen in das Kästchen neben dem Dateinamen oder entfernen Sie es.
Weniger bekannte Haltepunkt-Funktionen nutzen: bedingte Haltepunkte und Logpoints
Haltepunktbedingungen bearbeiten oder Logpoint-Protokoll ändern, indem Sie einen Haltepunkt bearbeiten
Wenn Sie eine Haltepunktbedingung oder ein Protokoll bearbeiten möchten, bewegen Sie den Mauszeiger auf einen Haltepunkt und klicken Sie auf die Schaltfläche Bearbeiten , die angezeigt wird. Daraufhin wird ein Dialogfeld geöffnet, in dem Sie den Haltepunkttyp und die Details des Haltepunkts ändern können.
Alternativ können Sie die Zeile des Haltepunkts im Code-Editor auswählen und unter Linux Strg+Alt+b und unter Mac Befehlstaste+Alt+b eingeben, um das Dialogfeld zum Bearbeiten des Haltepunkts zu öffnen.
Sie können Ihre Bedingung oder Ihr Logpoint-Protokoll auch schnell noch einmal prüfen, indem Sie in der Seitenleiste den Mauszeiger auf den Haltepunkt bewegen:
Fazit
Unser Ziel beim Redesign der Haltepunkt-Seitenleiste war es, das Debuggen mit Haltepunkten zu erleichtern. Vor allem wollten wir die Dinge strukturierter und leichter zugänglich und verständlicher machen. Wir hoffen, dass Ihnen diese Verbesserungen bei Ihrer nächsten Debugging-Sitzung helfen.
Wenn Sie Vorschläge für weitere Verbesserungen haben, melden Sie uns einen Fehler, indem Sie einen Fehler melden!
Vorschaukanäle herunterladen
Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle haben Sie Zugriff auf die neuesten Entwicklertools-Funktionen, können innovative Webplattform-APIs testen und Probleme auf Ihrer Website finden, bevor Ihre Nutzer sie entdecken.
Chrome-Entwicklertools-Team kontaktieren
Verwenden Sie die folgenden Optionen, um die neuen Funktionen, Updates oder alles andere im Zusammenhang mit den Entwicklertools zu besprechen.
- Senden Sie uns Feedback und Feature Requests unter crbug.com.
- Melden Sie ein Problem mit den Entwicklertools über das Weitere Optionen > Hilfe > DevTools-Problem melden in den Entwicklertools.
- Tweeten Sie an @ChromeDevTools.
- Hinterlassen Sie Kommentare zu den YouTube-Videos „What's new in DevTools“ oder „DevTools Tips“.