Chrome JavaScript Debugging - how to keep break points between page refresh or break through code?

Question

When using Chrome and its JavaScript debugger, every time I reload my page / scripts, my breakpoints are lost and I need to find the script file in the popup window, find the line of code for my breakpoint, click to add it, etc. d.

Is there a way to keep these breakpoints so that it breaks even after refreshing the page (the other debuggers I used did this)?

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

Answer 1

You can put

debugger; 

to break down most JavaScript environments. They will persist. It is good to have a minifier that replaces the debugger and console.log calls for the production environment if you use them.

In recent versions of the Chrome browser, there is the option "Save log" at the top of the console panel next to the filters. In older versions, by right-clicking on an empty console window, you will get this option ("Save log when navigating"). This is convenient if you do not have console commands or hard-coded debugger calls.

update: I found a tool for github called chimney that takes a file and removes all calls to console.log. this gives a good idea of ​​how to remove debugger calls.

Answer 2

Set breakpoints, go to the "Network" tab and select the switch button Save log when navigating . Now the breakpoints should be there when you update.

Or a JavaScript way to use

 debugger; 

Answer 3

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

If so, it looks like the Chrome developer tools will interpret this file as new after the update, which will (correctly) remove the breakpoints.

For me, deleting the query parameter made CDT save breakpoints after the update.

Answer 4

Does this probably happen for scripts that you dynamically load or evaluate from other scripts? I can tell for myself that this script really annoyed me until I discovered the sourceURL property. Placing the following specially formatted comment in the last line of the script that you want to debug will “bind” it in Chrome, so there is a help system for it:

// # sourceURL = filename.js

Manual breakpoints will persist between page loads! The convention was indeed based on the sourcemap specification, but Chrome, at least, recognizes it as a separate method. Here is the link .

Answer 5

You can use the debugger; statement debugger; in its source to disable the debugger.

Answer 6

Chrome developer tools should behave as you expect, but you can put debugger; statements debugger; into your code (development!) to pause execution.

Answer 7

For users using ExtJs 6.x:
instead of disableCaching in Ext.Loader, you can add the request parameter "cache" or "disableCacheBuster" to the URL. This will remove the "_dc" parameter from the file and enable the chrome debugger to save the breakpoint.

See the bootstrap.js file in the application (disableCaching configuration parameter).