Wenn Sie Chrome 111 oder höher verwenden, haben Sie vielleicht schon bemerkt, dass wir das Design der Seitenleiste mit Haltepunkten geändert haben. In Chrome 113 ersetzt die neue Seitenleiste das bisherige Design vollständig. Mit der Neugestaltung wollten wir den Haltepunkt-Workflow folgendermaßen verbessern:
Eine bessere Übersicht über alle festgelegten Haltepunkte. Gängige Nutzerworkflows werden mit Haltepunkten leichter zugänglich und intuitiver. Coole vorhandene Haltepunktfeatures werden sichtbar.
In diesem Beitrag wird davon ausgegangen, dass Sie bereits mit dem Debugging mithilfe von Haltepunkten vertraut sind. Wenn Sie Haltepunkte noch nicht verwendet haben, lesen Sie diese Übersicht zu Haltepunkten. Dort erfahren Sie mehr darüber, wie Sie Haltepunkte zur Fehlerbehebung in Ihrem Code verwenden können.
Sehen wir uns nun an, was das neue Design bietet und wie Sie die neue Seitenleiste nutzen können! Mit der Neugestaltung möchten wir bestehende Funktionen intuitiver und leichter zugänglich machen, anstatt neue hinzuzufügen.
Halten Sie bei Ausnahmen eine Pause ein, um zu untersuchen, warum Ihr Code einen Fehler ausgibt.
Löst Ihr Code eine Ausnahme aus? Kein Grund zur Sorge! Mit den Chrome-Entwicklertools können Sie bei Ausnahmen anhalten, um die Ausführung an dem Punkt zu stoppen, an dem Ihre Ausnahme ausgelöst wird. So können Sie besser nachvollziehen, unter welchen Umständen Ihr Code einen Fehler auslöst. Durch Aktivieren der entsprechenden Kästchen in der Seitenleiste können Sie festlegen, ob das System bei abgefangenen Ausnahmen, nicht abgefangenen Ausnahmen oder beidem pausiert werden soll.
Haltepunkte verwalten: Maximieren Sie relevante Haltepunktgruppen und minimieren Sie andere, um sich auf das Wesentliche zu konzentrieren.
Haltepunkte können auf mehrere Dateien verteilt sein. In der Seitenleiste der Haltepunkte werden Haltepunkte nach der Datei gruppiert, zu der sie gehören. Konzentrieren Sie sich nur auf die, die für die aktuelle Debugging-Sitzung relevant sind, indem Sie die relevanten Haltepunktgruppen maximieren und die übrigen minimieren.
Haltepunkte verwalten: mit nur einem Klick zu Code wechseln, Haltepunkte entfernen oder aktivieren/deaktivieren
Über die Haltepunkt-Seitenleiste können Sie häufige Aufgaben mit nur einem Klick erledigen. Mit den folgenden Schritten können Sie ...
Gehen Sie im Code-Editor zur Position des Haltepunkts. Entfernen Sie einen oder alle Haltepunkte in einer Datei. Aktivieren oder deaktivieren Sie einen oder alle Haltepunkte in einer Datei.
Und all das mit nur einem Klick! Diese Optionen sind natürlich auch im Kontextmenü verfügbar:
Durch Klicken auf das Code-Snippet für den Haltepunkt zur Position des Haltepunkts springen
Möchten Sie prüfen, an welcher Stelle im Code Sie den Haltepunkt gesetzt haben, und den umgebenden Code analysieren? Klicken Sie einfach auf das Code-Snippet eines Haltepunkts in der Seitenleiste. Daraufhin wird die Code-Position im Code-Editor geöffnet.
Sie können 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 der ein oder alle Haltepunkte in einer Datei per Klick entfernt werden.
Einen einzelnen 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 bzw. zu deaktivieren.
Um alle Haltepunkte in einer Datei zu aktivieren oder zu deaktivieren, bewegen Sie den Mauszeiger auf die Haltepunktgruppe und klicken Sie das Kästchen neben dem Dateinamen an oder entfernen Sie das Häkchen.
Nutzen Sie diese weniger bekannten Haltepunktfunktionen: bedingte Haltepunkte und Logpoints
Haltepunktbedingungen bearbeiten oder Logpoint-Log ändern, indem Sie einen Haltepunkt bearbeiten
Sie können eine Haltepunktbedingung oder ein Halteprotokoll bearbeiten, indem Sie den Mauszeiger auf einen Haltepunkt bewegen und auf die eingeblendete Schaltfläche Bearbeiten klicken. Dadurch 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 auf einem Mac Befehlstaste + Alt + b eingeben, um das Dialogfeld zum Bearbeiten von Haltepunkten zu öffnen.
Sie können die Bedingung oder das Logpoint-Log auch schnell prüfen, indem Sie in der Seitenleiste den Mauszeiger auf den Haltepunkt bewegen:
Fazit
Mit der Neugestaltung der Seitenleiste mit Haltepunkten wollten wir das Debugging mit Haltepunkten vereinfachen. Unser wichtigstes Ziel war es, Inhalte strukturierter, leichter zugänglich und verständlich zu gestalten. Wir hoffen, dass dir diese Verbesserungen bei deiner nächsten Debugging-Sitzung helfen.
Wenn du Verbesserungsvorschläge hast, kannst du den Fehler melden.
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
> 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.