Workarounds for asynchronous-loaded JavaScript not appearing in source in the Chrome developer tool

First of all, when you see this article, I believe you are already a mid-level or even advanced front-end developer.

Because of the asynchronous loading of JavaScript, it is almost invisible in some small to medium-sized projects.

and asynchronous loading JavaScript in the final analysis, is for performance optimization, prevent JS loading caused by page blocking.

Will notice performance, stating that you are no longer a front-end development that stays on the implementation level, but a higher-pursuit person.

In this, to all who have the pursuit of praise ~ ~ ~

Yesterday for the company's project to do front-end optimization, one of which is to do the script asynchronous loading.

But strangely enough, the async-loaded JS appears in the network of the chrome developer tool, but it doesn't appear in source ...

The last company has always done this by using JQuery's Ajax method to load JS asynchronously, but it never happened.

Inexplicable occasion, consulted the company's great God, the Internet to find a variety of information, always no solution.

So you gave up? NO, such an optimization is quite necessary, how can you give up so easily.

Continue to observe the performance of the asynchronous load script in the project ...

The first thing to be sure is that the script is already loaded and executed successfully.

The key is why not appear in source, only in the network?

Open the website of the previous company and observe the similarities and differences between the scripts they loaded asynchronously and the asynchronous load scripts in my project in the network.

It is found that the former type in the network is script, and the latter is XHR, and only a script of type scripts will appear in source.

OK, there's a clue, and then there are the various attempts to get the type of the script that was loaded asynchronously in our project into script

During the trial, I had suspected the request header and response header, suspected server-side configuration, various doubts ...

But there is always no solution, finally on the Internet to see a way ...

Add the following line of code at the beginning or end of the script file:

// @ sourceurl = xxx.js

You must have a space between @ and sourceURL, you can specify a file name after the equals sign, you can also specify a domain and a directory, and the script will appear under (no domain) without specifying a field.

This script can be found in the source of the developer tool.

OK, this is really a solution, but this requires adding a step in the workflow to add this code to each asynchronous loaded script file.

If you want to consider the domain and directory in which the code is located, the processing of the workflow is more complicated.

I think the last company does not need to do these birds, why do I have to suffer this sin ah.

So cry ~ Continue my pursuit, all kinds of attempts to find information.

A 2-hour trial was fruitless, as I was almost desperate to give up. Suddenly an idea sprouted in my mind.

In our project, we introduced the online script of my last company asynchronously.

After the introduction, we find that the type is script and found its shadow in source ...

Now heart 10,000 grass mud horse Pentium and past, good boy, do you look handsome? I will not superstitious ...

So I analyze the script in my project, the difference from the script on the online website of the previous company ...

At the moment, finally to the article's dry time! I found the key point!. Their difference is that one is the same domain, one is cross-domain!

Of course, this is only the stage of doubt, practice is the only standard to test the truth!

So I made myself a different local service, simulating cross-domain, requesting local service scripts, nice! Succeeded in finding its figure in source.

The final question is, how do you implement cross-domain asynchronous request scripting in your project?

Method One: Build a dedicated front-end static resource domain

That's what my last company did, not to blame. The various script loads can be successfully found and debugged in source

Now, although the company also has this aspect of planning, but it is not yet time, casual, this practice is a bit unrealistic.

So the second way is born

Method Two: Use the Crossdomain property of the jquery Ajax method to set it to true

The Crossdomain attribute is an unpopular attribute of the AJAX approach, with few people who know it and few who use it.

After all, the cross-domain already has the well-known jsonp, very few people will notice this Dim attribute (tried to interview when someone asked it, then kneeling, in retrospect, the heart is 10,000 grass mud horse Pentium and past ...) ）

But the existence of every thing must have its truth. Today is the day of glowing fever.

When you set the Crossdomain property to True, the AJAX request is forced into a cross-domain request! Even if it's actually the same domain!

OK, everything is ready, F5 refresh the page. The script is displayed in the network, and then in source, the script that successfully finds the asynchronous request, the domain and the directory are all right!

At this point, the problem is solved by using an attribute in such a simple way!

Although the length of this article and dry content seems a bit disproportionate.

However, this aspect of the article, I searched for a long time, have not found the relevant, that the study of the problem of people do less, or do not share it.

This also reflects the value of this article! It was also the main reason for me to solve this problem for a full half day!

Details the process of solving the problem, on the one hand, I hope you know, research conclusions hard-won.

On the other hand, I hope that you can trigger the thought of reading the article, ask yourself, what is your attitude to the problem and problem solving, do you think you have done enough?

At least, my evaluation of my own is that ability can not afford to start their own time, the road behind is very long, still need a lot of effort ~ ~

Workarounds for asynchronous-loaded JavaScript not appearing in source in the Chrome developer tool