Preface
In our daily development, we often use the powerful chrome console Sources to debug code breakpoints, but we can't find it in Sources by loading JS asynchronously through $.getScript and other asynchronously. So how to debug breakpoints? Let’s take a look together below.
This is an example diagram of our debugging with Sources breakpoint:
In the figure, we can see that in index.js we introduce test.js through $.getScript to see how it performs:
We saw in Network that test.js has been successfully introduced, but it belongs to XHR class requests, so we will definitely not find it in Sources.
As expected, there were indeed no traces of test.js found in Sources! The climax is coming, so how can I debug the breakpoint? ? ?
I know two solutions, first the easiest one:
Solution 1: Add //@ sourceURL=test.js to the header or tail of the test.js code, and then find it in (no domain) for debugging and see the result:
Solution 2: Change the asynchronous method of $.getScript to create script tags and load synchronously. The figure is directly listed:
Summarize
The console breakpoint is very useful for us to check code, function detection, data viewing and other needs. We try to replace the annoying console.log with breakpoints. The above is the entire content of this article. I hope it will be helpful to everyone's study and work. If you have any questions, you can leave a message to communicate.