How the Chrome browser breakpoints debug asynchronous loading Js_javascript Tips

Objective

In our daily development, often using the powerful Chrome console sources code breakpoint debugging, but by $.getScript the way the asynchronous loading JS in the sources inside is not found, that how debug breakpoint debugging? Let's take a look together.

This is the example diagram we used to debug with sources breakpoints:

As we can see in the index.js, we $.getScript introduce test.js to see how it behaves:

We see in network that Test.js has been introduced successfully, but it belongs to the XHR class request, so that we cannot find it in sources.

Unsurprisingly, sources found no traces of test.js! The climax comes, that also how to carry on the breakpoint debugging???

I know two programs, first come to the simplest:

Plan One: in the test.js code of the head or tail plus //@ sourceURL=test.js , and then (no domain) find it in the inside to debug, see the results:

Scenario Two: $.getScript replace this asynchronous approach with creating a script label to load synchronously, directly above:

Summarize

Console breakpoint on our code check, function detection, data viewing and so on demand is too useful, we try to use breakpoints to replace that annoying Console.log bar, the above is the entire content of this article, I hope that the study and work can help, if you have questions you can message exchange.