27 lines
1.6 KiB
Markdown
27 lines
1.6 KiB
Markdown
|
# Debugging Client Side JS
|
||
|
|
|
||
|
|
Debugging client side JS can be a pain because every-time you change the URL (including a change in the params used or param values) you need to **reset the breakpoint and reload the page**.
|
||
|
|
|
||
|
|
### `debugger;`
|
||
|
|
|
||
|
|
If you place the line `debugger;` inside a JS file, when the **browser** executes the JS it will **stop** the **debugger** in that place. Therefore, one way to set constant breakpoints would be to **download all the files locally and change set breakpoints in the JS code**.
|
||
|
|
|
||
|
|
### Overrides
|
||
|
|
|
||
|
|
Browser overrides allows to have a local copy of the code that is going to be executed and execute that one instead of the one from the remote server.\
|
||
|
|
You can **access the overrides** in "Dev Tools" --> "Sources" --> "Overrides".
|
||
|
|
|
||
|
|
You need to **create a local empty folder to be used to store the overrides**, so just create a new local folder and set is as override in that page.
|
||
|
|
|
||
|
|
Then, in "Dev Tools" --> "Sources" **select the file** you want to override and with **right click select "Save for overrides"**.
|
||
|
|
|
||
|
|
.png>)
|
||
|
|
|
||
|
|
This will **copy the JS file locally** and you will be able to **modify that copy in the browser**. So just add the **`debugger;`** command wherever you want, **save** the change and **reload** the page, and every-time you access that web page **your local JS copy is going to be loaded** and your debugger command maintained in its place:
|
||
|
|
|
||
|
|
.png>)
|
||
|
|
|
||
|
|
## References
|
||
|
|
|
||
|
|
* [https://www.youtube.com/watch?v=BW\_-RCo9lo8\&t=1529s](https://www.youtube.com/watch?v=BW\_-RCo9lo8\&t=1529s)
|