Question

Is there a JavaScript library that can perform timing of the webpage when it loads? For example the customer calls with a performance problem. We tell them to turn on a “debug” checkbox, which would send browser performance info back to the web-server, and the web-server would then phone home. We can then see exactly what was happening in their browser.

I’m interested in something like what FireBug “Net” tab or YSlow produces, without requiring the customer to install anything or modify their browser in any way. Does it exist (commercial software is OK)?

Answer 1

There isn’t any software up to this task that I’m aware of. Logging network traffic cannot be done by a general algorithm on a webpage due to security issues I think. In fact, Firebug has a Bookmarklet version, which is known to be act as part of the webpage, and it has most of the functionalities except the Net panel.

My suggestion would be a self-maintained debug mode of a webpage, because it seems to be the only way to collect data from the website. The idea would be to set up a simple Timer and save key events of the page load, finally post it to the server for further processing. This can be a simple request of an img for instance _tracker.gif?onload=4.3&domload=3.21&e1=0.4&e2=1.3

Listening for window.onload and DOM ready are rather common tasks, and are relatively easy to do.

The other custom events can be generated in two ways:

• tracker image with img.onload handler that registers the time elapsed since the beginning. The idea is that each tracker image represents a key event during page load.
• adding onload listeners to certain resources themselfs. Like big script files, or images.

What may also be essential in debug mode is catching possible errors. This can be obtained via the window.onerror event listener, which is supported is most browsers.

If you want more detailed logging of network traffic you may also wrap your AJAX hanlder into a manager object that supports logging.