How to set a breakpoint to access js file / lib in dev tools in chrome?

Question

Is it possible to get a breakpoint during debugging so that it stops every time a specific class is accessed , otherwise it works fine.

This is a very common use case when you do not want to dwell on jquery functions or other common libs functions and want to dwell on a specific js file rather than know what might cause an error, so you do not need to explicitly set a breakpoint on every line in the js file to catch all hits in this file . Are there any options for Chrome DevTools for this debugging feature?

Update:

Or maybe there is another way to get similar functionality, ignoring whole libraries like jquery if there should be a breakpoint so that only other files will be processed using the debugger? It will still not be the best solution for this case, but in any case it saves a lot of time.

Update2:

the second approach is described here , but I have Chrome 26 and, unfortunately, I can’t update it over the next two to two months, so this function now does not work for my browser.

Answer 1

The only way to do this is to color the debugger; statements debugger; inside your file. At the beginning of the file and at the beginning of each organ, functions should be enough.

Link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

Answer 2

You can set conditional breakpoints in the Sources panel. If you right-click on the line number groove, you will see a context menu for various parameters that you can use, one of which is a conditional breakpoint. For example, if (condition) break;

Click Change Breakpoint to do this.

Answer 3

If you know that a function (s) is being called, you can use function breakpoints

 debug(function); function(...args); 

When you call a function, it hits the breakpoint. They are not saved when the page reloads, but you can set the breakpoint of the line as soon as you click the breakpoint of the function.

This may seem tedious.

If you have a feature set, you can do

 [function0, function1].map(debug) 

Answer

@Tibos would be nice if there was some kind of Babel transform to insert a debugger; at the beginning of each function instead of inserting it manually.

Answer 4

You press F12 => select Sources => press CTRL + O => input file name => finally make a breakpoint