Last weekend, I was optimizing a site, to demonstrate what we can do, for a customer. I thought I would write about some of the basic tools that I used, since most of the junior developers do not know understand the full potential of these tools.

The two tools I reach out to test the web applications are Firefox and chrome. Chrome has good basic tools for performance testing, but Firefox shines with its many plugins.

First start by downloading the basic Firefox and installing it. Then, install the following plugins:

Firebug and friends

By far the most useful plugins are based on Firebug. Here are the ones I use:

1. Firebug: Coolest plugin. You can see any element of the web page and understand what it is, what is the style applied, how the layout works etc. You can even dynamically edit the page to see how it looks before making any HTML changes back on the server.
2. Friends of firebug: These ones are mostly cosmetic plugins that depend on firebug. 1. friendly bug 2. firebug autocompleter 3. Firecookie 4. Firefinder 5. Fireflow 6. FireRainbow
3. Yslow: Understand why a web page is slow
4. Pagespeed: Google’s version of why slow plugin

Here are the typical use cases:

Say, you want to see what styling a particular element has (for example, you want to see what font is being used). Here is what you can do:

Select the element and choose “Inspect element”. You get to see the HTML in one pane and style in another. Notice how the style part shows which css has impacted the style and how. If you want to see what is being overridden, this is the best tool.

Or, you want to examine how the HTML corresponds to the elements of the page, fire up Firebug and you will see the details in a separate pane. You can select an element and see the style, computed style, layout, and the DOM.

Here is another little trick. You can edit any of the HTML or CSS you see and instantly figure out the impact on the page.

Suppose you want to know why a page is slow. All you need is to run the Yslow plugin (which makes use of Firebug). Here is what you see:

You will see several suggestions to improve the performance of the site. Most of these suggestions are valid – but, it takes some expertise to interpret the results.

A similar view is provided by Google’s pagespeed:

I am not showing all the details, needless to say. Except for a couple of differences, it is similar to Yslow.

Developer Toolbar

While Firebug is interactive and nice, there is an older plugin that fulfills different needs ([Web Developer](http://chrispederick.com/work/web- developer/)). Here is what it can do.

1. You can disable the elements of the page selectively – Javascript, CSS, etc. That tells you more about how the page looks.
2. You can manage cookies (there are other plugins that specialize in cookie management – but this one suffices for most needs).
3. You can see CSS about an element, edit it, and disable it etc. It is similar to firebug, but a little simpler to use.
4. You can manage the forms – you can see each element description, layout, make the hidden fields visible, make the password fields readable etc.
5. You can check out the images – sizes, positions, alt tags etc. Useful to see those web bugs.
6. You can get various pieces of information about the page: layout, block details etc. It actually overlays the information on the page making it easy to understand for the novices.
7. You can validate the page against several rules: Sec 508 compliance etc. You can validate HTML, CSS, links, images etc.

It is a neat little toolbar that is easy to use (firebug is more developer friendly; this one is user friendly).

HTTP protocol analyzers

Suppose you want to know all the requests going back from a page (especially these days with all the AJAX calls, you can see all those requests using these tools. I use the following tools:

1. Live HTTP headers
2. HTTPFox

I like HTTPFox for the better control. Here is how a facebook request might look like (View –> HTTPFox is the way to invoke it):

You can see the summary, and the details of each request. This is wonderful way of seeing how the CDN is working, caching is working, and the cookies are working.

Misc

Here are miscellaneous ones that I use:

1. FireShot: You don’t need the Pro version. The free version is good enough for us. And, it lets us annotate the screenshot too!
2. LightShot: This is a simple tool – not a commercial one.

Things Indian

These two plugins are no way needed for development. However, I use them often to help read and write Indian languages. Considering that they use something I invented (Telugu Transliteration scheme called RTS) 20 years back, I am particularly gratified. Here they are:

1. Indic Input Extension – it lets you type Indian languages in English in normal keyboard.
2. Padma – it lets you transform a page written in in romanized Telugu to Telugu script.

Summary

With these plugins, we can analyze a page, optimize a page, and transform a page. I have setup a collection called: https://addons.mozilla.org/en-US/firefox/collections/kramarao/deve/ so that you can download all of them in one go.