Profiling with

You can complement your existing profiling tools (e.g as supplied by Firebug, IE8 Developer Tools) by using to gather just the data you are interested in, and log it at the server.

The analytics package is extremely extensible, but for this simple task we can use it right out of the box. Here’s the goal - what we want to be able to do:

dojo.addOnLoad(function() {
	timestamp("addOnLoad function begins");
	dijit.byId("pane").attr("content", "loaded");
	timestamp("pane widget content is set");
	setTimeout(function() {
		timestamp("3000 ms after onLoad");
	}, 3000);
	dojo.connect(dojo.body(), "click", function() {
		timestamp("body click");
	timestamp("addOnLoad function ends");

The idea is that by adding a simple timestamp("message") statement at or around the code we are interested in, we’ll end up with a log file of annotated timestamps that will throw light on what is happenning when, and where there might be bottlenecks that are slowing our application down.

The result should be log entries on the server like this:	2	1251987197120	addOnLoad function begins	2	1251987197130	pane widget content is set	2	1251987200130	3000 ms after onLoad

The endpoint on the server is a simple php file. I based mine on the one in the dojox/analytics/tests directory. You configure it like so:

<script type="text/javascript" src="path/to/dojo/dojo.js"
		djConfig="parseOnLoad: true, isDebug: true, analyticsUrl: './analyticsLog.php'"></script>

And with all the usual disclaimers, here’s the server-side code:

	$filename = "./logs/analytics.log";
	$id = $_REQUEST["id"];
	$items = json_decode(stripslashes($_REQUEST["data"]));
	if (!$handle = fopen($filename, 'a+')) {
		print '{error: "server error"}';
	foreach($items as $i=>$item){
		$log = implode("\t", array(
		)) . "\n";
		fwrite($handle, $log);
	$response = "{'eventsRecieved': '" . sizeof($items) . "', 'id': '" . $id . "'}";
	if (isset($_REQUEST["callback"])){
		print $_REQUEST["callback"] . "(" . $response . ");";
		print $response;

Which just leaves the timestamp function to implement:

function timestamp(msg) {"timestamp", [new Date().getTime(), msg]);

That’s it. One line. gathers up the data and sends it periodically back to the server. You can flush it yourself, configure and extend it in a multitude of ways - have a poke around and see what could be doing for you.