Depuración de JS del lado del cliente

Depuración de JS del lado del cliente

Depurar JS del lado del cliente puede ser un dolor porque cada vez que cambias la URL (incluyendo un cambio en los parámetros utilizados o valores de parámetros) necesitas reiniciar el punto de interrupción y recargar la página.

debugger;

Si colocas la línea debugger; dentro de un archivo JS, cuando el navegador ejecute el JS, detendrá el depurador en ese lugar. Por lo tanto, una forma de establecer puntos de interrupción constantes sería descargar todos los archivos localmente y establecer puntos de interrupción en el código JS.

Sobrescrituras

Las sobrescrituras del navegador permiten tener una copia local del código que se va a ejecutar y ejecutar esa en lugar de la del servidor remoto.
Puedes acceder a las sobrescrituras en "Dev Tools" --> "Sources" --> "Overrides".

Necesitas crear una carpeta local vacía que se utilizará para almacenar las sobrescrituras, así que solo crea una nueva carpeta local y configúrala como sobrescritura en esa página.

Luego, en "Dev Tools" --> "Sources" selecciona el archivo que deseas sobrescribir y con clic derecho selecciona "Save for overrides".

Esto copiará el archivo JS localmente y podrás modificar esa copia en el navegador. Así que solo agrega el debugger; donde quieras, guarda el cambio y recarga la página, y cada vez que accedas a esa página web tu copia local de JS se cargará y tu comando de depuración se mantendrá en su lugar:

Referencias

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