Often times when optimizing page speed score, it’s necessary to exclude some JS files in order to preserve the page functionality untouched. In cases like this it’s useful to quickly review all the JS files loaded in that page, and while looking at the page code could do it, it’s much easier to ask the browser what’s loaded in any given page.
That can be done easily (at least in Chrome) with a small JS snippet. Here are the steps and the snipped useful for this:
- Open the browser console (press F12)
- Click the Console tab
- Paste this code in the console and hit Enter:
[...document.scripts].map(script => script.src.split('/').pop().split('?')[0]).filter(filename => filename);
The result will look something like this:
["app.js", "vendor.js", "analytics.js"]
Or, if you need them one per line, use this code:
console.log([...document.scripts].map(script => script.src.split('/').pop().split('?')[0]).filter(filename => filename).join('\n'));
Or, if you need the paths as well, this code will do precisely that:
console.log([...document.scripts].map(script => script.src).filter(src => src).join('\n'));
OR, a modern alternative is the Coverage section in (Chrome) browser developer tools. It’s not that easy to get the list, but the filter and the Usage Visualization can give some interesting insights.