How to set a breakpoint on access a js-file/lib in

问题:

Is it possible to get a breakpoint when debugging, so that it stops each time when the certain class is accessed, otherwise it runs normally.

It's very common use case when one don't want to stop on jquery functions or other common libs functions, and want rather to stay on a specific js-file, but has no idea of what there could fire a bug, so one don't want explicitly to set a breakpoint on every line in the js file to catch all accesses on that file. Are there any options for Chrome DevTools for that debugging functionality?

Update:

Or maybe there is another way to get the similar functionality by ignoring whole libraries such as jquery, if there should be a breakpoint, so that only other files will be handled with debugger? That would be still not the best solution for the case, but anyway saves much time.

Update2:

the second approach is described here, but I have Chrome 26, and unfortunately cannot update it in the next one-two months, so this feature doesn't work for my browser now.

回答1:

The only way to do it would be to sprinkle debugger; statements inside your file. At the begining of the file and at the begining of every function body should be enough.

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

回答2:

You can set conditional breakpoints to in the Sources panel. If you right-click on the line-number gutter it will show you a context menu for different options you can use, one of which is conditional breakpoints. Like, if(condition) break;

Click Edit Breakpoint to do this

回答3:

If you know the function(s) being called, you can use function breakpoints

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

When you call the function, it will hit the breakpoint. These aren't saved on page reload, but you can set a line breakpoint once you hit the function breakpoint.

This can get kinda tedious though.

If you have a array of functions, you can do

[function0, function1].map(debug)

@Tibos answer would be good if there was some sort of babel transform to insert debugger; at the start of every function, instead of inserting it manually.

回答4:

You press F12 => select Sources => press CTRL+O => entry file name => finaly make breakpoint