Chrome JavaScript Debugging - how to save break po

问题:

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)?

回答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.

回答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;

回答3:

Also, do you send your JavaScript file(s) from the server to the client with an attached query parameter to the URL with the current Epoch time? This is used to prevent caching of the JavaScript file(s).

When this is the case, it seems like the Chrome Developer Tools interprets the file to be a different one after the refresh, which will (correctly) remove the breakpoints.

For me, removing the query parameter made the CDT keep the breakpoints after refresh.

回答4:

This is probably happening for scripts that you're dynamically loading or evaluating from other scripts? I can say for myself that this scenario really irritated me until I discovered the sourceURL property. Placing the following specially formatted comment on the last line of the script you want to debug will 'anchor' it within Chrome so it has a frame of reference for it:

//# sourceURL=filename.js

Your manually-placed breakpoints will now persist between page loads! The convention actually originated from the sourcemap specification, but Chrome at least honors it as a standalone technique. Here's a reference.

回答5:

For people using ExtJs 6.x:
instead of disableCaching in the Ext.Loader you could add a "cache" or "disableCacheBuster" query parameter to the page's URL. This will remove the "_dc" parameter from the file and enable chrome debugger to persist the breakpoint.

See bootstrap.js in your application (config parameter disableCaching).

回答6:

You can put debugger; before the code where you want to start debugging. Once the page starts loading,it would stop at the debugger; statement. Then you can easily apply the debugging point as per your requirement.

回答7:

You can use the debugger; statement in your source to make the debugger break there.

回答8:

Chrome Developer Tools should behave the way you expect but you can put debugger; statements in your (development!) code to pause the execution.