4

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.

Larry K
  • 47,808
  • 15
  • 87
  • 140
static
  • 8,126
  • 15
  • 63
  • 89
  • [debugger statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) – Givi Nov 29 '13 at 17:48
  • how would it work in Chrome? – static Nov 29 '13 at 17:54
  • 1
    the same way as in the other browsers. If js engine reaches the line with debugger statement and DevTools window has been opened then js engine stops on the line and DevTools shows you the source. – loislo Nov 30 '13 at 05:02

4 Answers4

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

Tibos
  • 27,507
  • 4
  • 50
  • 64
  • Never used it. How it looks like? Is it the same @Givi commented the question about? – static Nov 29 '13 at 17:55
  • Yes, it basically sets a breakpoint from the code. It also works in Chrome btw. – Tibos Nov 29 '13 at 17:56
  • it doesn't work in my case: the file I want to catch is a closure, so it will read the beginning and the end of the file only once the file is loaded. Otherwise I should write `debugger;` on each second line in the file (same as setting the breakpoints in my question description) – static Nov 29 '13 at 18:02
  • It is similar, but the advantage of using debugger; statements is that you can automate it by having a build step in which your sources are processed and the debugger statements are added automatically. This isn't an easy solution, but unfortunately there is no other solution i know of. – Tibos Nov 29 '13 at 18:30
0

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

enter image description here

jaredwilli
  • 11,762
  • 6
  • 42
  • 41
0

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.

dosentmatter
  • 1,494
  • 1
  • 16
  • 23
-1

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

  • Your answer only tells how to create a breakpoint in a file. He wants to break on each file ACCESS not on a specific line in a file. The file is not accessed from top to bottom on each file access, so it might not break if you just put a breakpoint to a random position. – Ev0oD Oct 25 '16 at 08:49