Debugging Client Side JS

Reading time: 2 minutes

Debugging Client Side JS

Das Debuggen von clientseitigem JS kann mühsam sein, da Sie jedes Mal, wenn Sie die URL ändern (einschließlich einer Änderung der verwendeten Parameter oder Parameterwerte), den Haltepunkt zurücksetzen und die Seite neu laden müssen.

debugger;

Wenn Sie die Zeile debugger; in eine JS-Datei einfügen, wird der Debugger an dieser Stelle stoppen, wenn der Browser das JS ausführt. Daher wäre eine Möglichkeit, konstante Haltepunkte zu setzen, alle Dateien lokal herunterzuladen und Haltepunkte im JS-Code zu setzen.

Overrides

Browser-Overrides ermöglichen es, eine lokale Kopie des Codes zu haben, die ausgeführt wird, und diese anstelle der vom Remote-Server auszuführenden zu verwenden.
Sie können die Overrides in "Dev Tools" --> "Sources" --> "Overrides" zugreifen.

Sie müssen einen lokalen leeren Ordner erstellen, der zum Speichern der Overrides verwendet wird, also erstellen Sie einfach einen neuen lokalen Ordner und setzen Sie ihn als Override auf dieser Seite.

Wählen Sie dann in "Dev Tools" --> "Sources" die Datei aus, die Sie überschreiben möchten, und wählen Sie mit Rechtsklick "Für Overrides speichern".

Dies wird die JS-Datei lokal kopieren, und Sie können diese Kopie im Browser ändern. Fügen Sie einfach den debugger; Befehl überall dort hinzu, wo Sie möchten, speichern Sie die Änderung und laden Sie die Seite neu, und jedes Mal, wenn Sie auf diese Webseite zugreifen, wird Ihre lokale JS-Kopie geladen und Ihr Debugger-Befehl an seinem Platz beibehalten:

References

• https://www.youtube.com/watch?v=BW_-RCo9lo8&t=1529s