Chrome JavaScript Debugging - how to save break points between page refresh or break via code?

Question

When using Chrome and it's JavaScript debugger, every time I reload my page / scripts, my breakpoints are lost and I have to go find the script file in the pop-up, find the line of code for my break point, click to add it, etc.

Is there a way to save these breakpoints so it breaks even after a page refresh (other debuggers I have used do this)?

Alternatively, is there a clean way in my JavaScript code I can type something to tell chrome to start tracing (to pause on a line)?

Answer 1

You can put a

debugger; 

to break in most of the JavaScript environments. They will persist for sure. It's good to have a minifier that rids the debugger and console.log calls for the production environment, if you are using these.

In the recent versions of Chrome browser, there is a "Preserve Log" option on the top of the console panel, next to the filters. In the older versions, right clicking on the empty console window will bring that option ("Preserve log upon navigation"). It's handy when you don't have console.log statements or hard-coded debugger calls.

update: I found a tool on github, called chimney, which takes a file and removes all the console.log calls. it gives a good idea about how to remove debugger calls.

Answer 2

Set your breakpoints, switch to the Network tab and select the Preserve Log Upon Navigation toggle button. Now the breakpoints should be there when you refresh.

Or the JavaScript way is to use

debugger;