# Depuración de JS del lado del cliente

## Depuración de JS del lado del cliente

{% hint style="success" %}
Aprende y practica AWS Hacking:<img src="/.gitbook/assets/arte.png" alt="" data-size="line">[**HackTricks Training AWS Red Team Expert (ARTE)**](https://training.hacktricks.xyz/courses/arte)<img src="/.gitbook/assets/arte.png" alt="" data-size="line">\
Aprende y practica GCP Hacking: <img src="/.gitbook/assets/grte.png" alt="" data-size="line">[**HackTricks Training GCP Red Team Expert (GRTE)**<img src="/.gitbook/assets/grte.png" alt="" data-size="line">](https://training.hacktricks.xyz/courses/grte)

<details>

<summary>Apoya a HackTricks</summary>

* Revisa los [**planes de suscripción**](https://github.com/sponsors/carlospolop)!
* **Únete al** 💬 [**grupo de Discord**](https://discord.gg/hRep4RUj7f) o al [**grupo de telegram**](https://t.me/peass) o **síguenos** en **Twitter** 🐦 [**@hacktricks\_live**](https://twitter.com/hacktricks\_live)**.**
* **Comparte trucos de hacking enviando PRs a los** [**HackTricks**](https://github.com/carlospolop/hacktricks) y [**HackTricks Cloud**](https://github.com/carlospolop/hacktricks-cloud) repos de github.

</details>
{% endhint %}

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** ejecuta 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 usará para almacenar las sobrescrituras**, así que solo crea una nueva carpeta local y configúralo 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"**.

![](<../../.gitbook/assets/image (742).png>)

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 depurador se mantendrá en su lugar:

![](<../../.gitbook/assets/image (594).png>)

## Referencias

* [https://www.youtube.com/watch?v=BW\_-RCo9lo8\&t=1529s](https://www.youtube.com/watch?v=BW\_-RCo9lo8\&t=1529s)

{% hint style="success" %}
Aprende y practica AWS Hacking:<img src="/.gitbook/assets/arte.png" alt="" data-size="line">[**HackTricks Training AWS Red Team Expert (ARTE)**](https://training.hacktricks.xyz/courses/arte)<img src="/.gitbook/assets/arte.png" alt="" data-size="line">\
Aprende y practica GCP Hacking: <img src="/.gitbook/assets/grte.png" alt="" data-size="line">[**HackTricks Training GCP Red Team Expert (GRTE)**<img src="/.gitbook/assets/grte.png" alt="" data-size="line">](https://training.hacktricks.xyz/courses/grte)

<details>

<summary>Apoya a HackTricks</summary>

* Revisa los [**planes de suscripción**](https://github.com/sponsors/carlospolop)!
* **Únete al** 💬 [**grupo de Discord**](https://discord.gg/hRep4RUj7f) o al [**grupo de telegram**](https://t.me/peass) o **síguenos** en **Twitter** 🐦 [**@hacktricks\_live**](https://twitter.com/hacktricks\_live)**.**
* **Comparte trucos de hacking enviando PRs a los** [**HackTricks**](https://github.com/carlospolop/hacktricks) y [**HackTricks Cloud**](https://github.com/carlospolop/hacktricks-cloud) repos de github.

</details>
{% endhint %}