How to debug JavaScript asynchronously? (many scripts are loading)

Question

Generally I know how set breakpoints, inspect variables, step into functions etc...

Default.htm consists of hundreds of scripts and empty placeholders.

Ideally I would like to proceed step-by-step. Setting breakpoint in the first line like that doesn't work:

When I step over next function call it is long gone (everything has loaded).

Generally how do I debug asynchronously loading scripts? (timeline clearly indicates that they are loading simultaneously)

Maybe I should use HTTP proxy such as Fiddler? I know how to set simple breakpoint (BPU) and then?

In other words - which approach - How can I debug my JavaScript code? - is tailored to my needs?

Answer 1

If you are using chrome dev tools:

1. let the site load
2. Put a break point at the entry point of your js. (if you don't know where this is, but a breakpoint at the outermost scope of each of the files under the Sources tab.
3. F5 (refresh the web page)
4. First break point that gets hit is your entry point. F11 - step into, F10 = step over.

Hope this helps.