获取 web 页面上加载的所有 JS 文件的列表

Question

A bit of a newbie question but what is the best way to get a list with full name path of all JS files loaded on my website?

To clarify: I have a page www.mypage.com - I want to get a list of all the JS files with their full name paths which are loaded on this page.

Answer 1

You should get all the script tags first::

var scripts = document.getElementsByTagName('script');

And then loop through it:

for(var i=0;i<scripts.length;i++){
scripts[i].src;
}

Answer 2

Something like that will do in modern browsers with ECMAScript 6 support. However, some scripts may remove their appropriate tags which would hide them from that list.

var jsFilePaths = Array.prototype.slice
    .apply(document.querySelectorAll('script'))
    .filter(s => s.src)
    .map(s => s.src);

Use normal for cycle if lambdas are not an option.

Scripts which were loaded through some data-loading method like XHR or JSONP and then executed through eval or new Function would not show up as well.

If you need to intercept and record XHRs and you don't have a centralized place where all XHRs are done, you will probably need to override XMLHttpRequest and add some logic to its readystatechange event to check whether the retrieved response is an executable JavaScript, see this question for more information: How to easily listen for xhr requests with javascript? .

If you need to intercept all cases when a <script> is being added to the DOM or having its src attribute manipulated, you can use DOM MutationObserver , see an MDN article for more information.

You may also need to intercept document.write and see if some script adds more inline scripts. Furthermore, non-script elements like <img/> may run scripts as well, as in the well-known XSS hack <img src="http://nonexistent.url/x.png" onerror="alert('xss!')" /> .

Additionally, it is important to note that any such XHR-intercepting and especially usage of DOM Mutation Events and DOM MutationObserver are detrimental to the page's performance, sometimes rather noticeably.

Answer 3

You can also use the Performance API :

 var entries = performance.getEntriesByType('resource'); entries.map(function(entry) { if (entry.initiatorType === 'script') { console.log('JS file:', entry.name); } });

Answer 4

Try out this code

var x = document.querySelectorAll("script");
var myarray = []
for (var i=0; i<x.length; i++){
var nametext = x[i].textContent;
var cleantext = nametext.replace(/\s+/g, ' ').trim();
var cleanlink = x[i].src;
myarray.push([cleantext,cleanlink]);
};
function make_table() {
    var table = '<table><thead><th>Name</th><th>Links</th></thead><tbody>';
   for (var i=0; i<myarray.length; i++) {
            table += '<tr><td>'+ myarray[i][0] + '</td><td>'+myarray[i][1]+'</td></tr>';
    };
 
    var w = window.open("");
w.document.write(table); 
}
make_table()