Mesure scripts parse and execution time with this simple browser proxy
MIT License
Mesure scripts parse and execution times with this simple browser proxy.
You're a web developer and you probably wonder what's the impact of the scripts you load when the page loads. And it's hard to know. Even more if some of them are weird minified third-party script!
ScriptTimingProxy helps you measure the parsing time of every script on the page, and to visualize when it is executed and for how long.
It's totally inspired by a brilliant idea from Daniel Espeset (Etsy): http://talks.desp.in/unpacking-the-black-box/
Chrome: works like a charm.
Firefox: will work soon in version 34. In FF33 you need to enable the Resource Timing API in the secret features flags. Open a tab with config:about
as the url and activate the flag dom.enable_resource_timing
.
IE: i didn't test but it should work on IE10 or more (please send me info).
Safari: not working.
On an HTTPS page, the proxy can't work. On an HTTP page, you won't be able to see the JS files loaded over HTTPS.
npm install script-timing-proxy -g
For use with Firefox (dec. 2014), you need to enable the Resource Timing API in the secret features flags. Open a tab with config:about
as the url and activate the flag dom.enable_resource_timing
.
Start the server by writing in your console: script-timing-proxy
Configure your browser's proxy to localhost:3838
. Only set the HTTP proxy, let the HTTPS (=SSL) proxy empty.
Clear your browser cache <== IMPORTANT
Open your browser's and load the page
You will see a yellow STP button in the bottom-right corner of the page. Click it.
Clicking on the STP button opens the waterfall view at the bottom of the page:
For each file on the waterfall:
There is also a tooltip for each script (the question mark next to the file name):
You will see vertical lines:
Gaël Métais. I'm a webperf freelance. Follow me on Twitter @gaelmetais, I tweet about Web Performances, Front-end and new versions of YellowLabTools!
I can also help your company about Web Performances, visit my website.