Tuesday, November 27, 2007

Using Profile in the Firebug Console

I kind of feel bad about my post last night regarding the Firebug console.  I covered very little of the feature and didn't do it much justice.  I'll try and add a little more in this post.

Another aspect of the Firebug console is the profile.  What it allows you to do is time the various functions called during the rendering of the page that is loaded.  To use it, fire up Firebug, and open the console tab.  You'll see at the top that there is a "Profile" button.  If you click that, it will start up the profiler.  Just clicking that actually won't do all that much, it just tells Firebug to wait for something to happen in this current browser session.

After clicking that button, you should see the following:

profiler started

Then visit the page you want to profile.  When the page is done loading, click the Profile button again, and this will tally up the results and display them in the console like so:

profiler results

You can click on each one of these functions and it will take you right to the line in the client side source.  Obviously if you minify your java script or obfuscate it in anyway, these results might be a little difficult to diagnose, but you can obviously see the benefits here.

This is truly the kind of functionality you can expect out of a pricey profiling tool for C# like ANTS.  Great stuff for profiling your client side application code.

Great stuff.  I promise I'll post more about this tool as I get time.