I've read through the documentation on breakpoints in the devtools of both Chrome and Firefox without becoming any wiser on the questions below. Guess some details are simply regarded as understood.
Just to be clear, when I set a breakpoint on a line, does the execution stop before or after the line has run?
If before, how do I make execution stop after the line, in case it's the last line?
What are the intricate reasons why I'm often not able to set a breakpoint on a specific line. For instance, on if statements or empty lines. Sometimes my breakpoint will even be (re)moved. Buggyness?
I can't seem to infer the logic for what happens when a breakpoint is placed on lines containing only brackets () } ]).
Breakpoints stop execution before the line has run.
To stop execution after a line, set a breakpoint on the following line or if it's the last line, on the closing bracket.
Set a breakpoint on line 3 in this example:
1. if (true) {
2. console.log('hello');
3. }
You can set breakpoints on if statements. Setting a breakpoint on the if (true) line above should work as expected. Yes, adding breakpoints is sometimes buggy when Chrome decides to automatically move them to some enclosing brackets. In these cases forcing a refresh can help, but adding a debugger; in place of a breakpoint is a more reliable workaround.
Orphaned brackets get treated as part of the previous/next line.
Setting a breakpoint on line 1 in this example would let you inspect lines 1-5 inclusive. A breakpoint on any of the lines 2-5 would automatically be moved to line 6. There isn't much value in setting a breakpoint on ()[] brackets. The curly braces {} are what matters.
1. if (a &&
2. (
3. b || c
4. )
5. ) {
6. console.log('hello');
7. }