Instant breakpoint with debugger statement in PhpStorm/WebStorm

Question

I'm investigating the possibilities to set up a breakpoint instantly when debugging JavaScript

for (...) {
  for (...) {
    ...
  }
  // need a breakpoint here
}

The problem here is that a breakpoint cannot be toggled on comment line, it needs a statement.

And when debugger statement is added to line, another problem appears - it doesn't switch to Debugger tab automatically. It just looks like the application is pending, with no indication.

And I'm trying to avoid adding dummy statements because they can be neglected (as for debugger, there is at least an inspection rule to highlight it).

Are there any tricks to achieve this? Can debugger statement be made to behave like usual breakpoint at least?

Answer 1

Speaking to the general question, there is only one answer, and it is the one you do not want to hear:

You must have a statement for the breakpoint

There are no tricks that are widely applicable (although there may exist some IDE that allows for convenience breaking immediately after a loop... weird)

Unfortunately, what you want is typically done with a temporary/dummy statements (exactly the kind that you are trying to avoid):

for (...) {
  for (...) {
    ...
  }
  // TODO: editors like Eclipse flag TODO lines so they are not lost in the source forest
  setTimeout(Function.prototype, 10000);
}

This is due to the mechanics of how (most) debuggers work: basic file and line numbers are stored as debugger information (hints) in the compiled code, and then matched up with the available source during debug execution. For non-compiled languages like JS/PHP, similar techniques are employed with the string that is parsed from source, but lines with comments or brackets are not really executable.

This issue has occasionally reared its ugly head during my own developer journey. It is simply part of the nature of debugging. I hope you can find a coding solution that provides you comfort and some peace of mind.