How does chrome breakpoint debug JS asynchronously loaded?

How does chrome breakpoint debug JS asynchronously loaded?

Preface

In our daily development, we often use the powerful console Sources of chrome for code breakpoint debugging,$. GetScriptI cannot find the asynchronous JS Loading Method in Sources. How can I debug the breakpoint? Let's take a look.

This is an example of using Sources breakpoint debugging:

As shown in the figure, in index. js, we use$. GetScriptIntroduce test. js to see how it works:

We can see in the Network that test. js has been successfully introduced, but it belongs to the XHR type request, so we cannot find it in Sources.

As expected, no trace of test. js was found in Sources! How can I perform breakpoint debugging ???

I know two solutions:

Solution 1:Add the header or tail of the test. js Code// @ SourceURL = test. jsAnd then(No domain)Find it for debugging and see the results:

Solution 2:Set$. GetScriptThis asynchronous method is used to create a script tag for Synchronous loading, directly:

Summary

The console breakpoint is too useful for us to perform code check, function detection, and data view. We try to replace the annoying console with breakpoints. log, the above is all about this article. I hope it will be helpful for your study and work. If you have any questions, please leave a message.