how to see the order of js scripts in a page?
I currently see the source html and go through the script declarations. But is there a better way to see the loading order?
how to see the order of js scripts in a page?
I currently see the source html and go through the script declarations. But is there a better way to see the loading order?
Share Improve this question asked Nov 14, 2012 at 16:41 user6123723user6123723 11.1k19 gold badges72 silver badges111 bronze badges 2- 3 use firebug for firefox or chrome developer tools and look at network tab – Kishore Commented Nov 14, 2012 at 16:43
- 2 I'd remend using the suggestions about developer tools. Looking at the source does not guarantee that you see all included scripts. If any are loaded by script later then they may not show up in the head (or elsewhere in the DOM). – Reinstate Monica Cellio Commented Nov 14, 2012 at 16:46
5 Answers
Reset to default 5The order of scripts in the html code might not give the exact sequence because there can be situation in which a script is on a remote server and it is down or it is slow. The best way to know is to analyze it visually on a timeline using chrome's in-built developer tool.
- Open the page in chrome
- Right click and inspect element
- Click Network
- Refresh the page to get the timeline view.
Update 2024
By now pretty much every browser offers a developer console. No need for an additional plugin/extension.
Usually those can be accessed via F12 on Windows/Linux.
Initial
You could use Firebug's NET console or the pendants of other developer tools as well. This gives you something like the following:
Using simply console, try this:
$(function(){
$('script',document).each(function(){
console.log($(this).attr('src') || $(this).text());
});
})
Script tags are loaded sequentially in the order they appear.
This means they are loaded in the order they appear in your HTML, one by one.
Script tags are loaded in the order they appear in the dom, that is correct. But only for those which are static in the dom.
Not for those who got injected by another javascript. You have to consider the initiator too.
This is pretty mon for example with tracking.
So assume following html ing from the server:
<html>
<script>A</script>
<script>B</script>
<script>C</script>
</html>
After everything is loaded html looks like this:
<html>
<script>1</script>
<script>A</script>
<script>B</script>
<script>2</script>
<script>C</script>
<script>3</script>
</html>
Was script 1 loaded before script B?
Likely if script 1 was injected by script A. But if script 1 was injected by script C, definetly not.
So it is not so easy to tell.
So the network tab of chrome is a very good way to go. Here you see the truth as in the answer of Sirko and Vinit