Debugging Web User Interfaces Using Firefox

There are plenty of tools available in the market to debug Java applications. However, debugging a client-side JavaScript application isn't all that easy. Mozilla's Firefox browser aims to change some of this. For example, I have used the following two highly rated extensions (available from addons.mozilla.org or via Firefox's Tools, Extensions menu).

JavaScript Debugger

This extension (code name Venkman) is extremely useful for debugging JavaScript (in web-based user interfaces). This provides many of the features you would expect from a GUI debugger, such as stepping through code, inspecting variables, and more. Figure 9.4 shows a screenshot of this debugger.

Figure 9.4. Firefox JavaScript debugger extension.

Web Developer

The Firefox Web Developer extension is loaded with 50 or more utilities and is probably one of the best-written extensions I have seen for developers; it is no wonder this extension consistently gets a 5 out of 5-star rating on the Firefox extensions site.

I mainly use the Form and Resize menus only because I haven't gotten around to trying the others, which include features for working with CSS, validating links, showing comments, displaying information about every single element on the page, and much more!

For example, I use the resize menu to resize my screen to 800x600 resolution to ensure that my UI is usable in this resolution. The indispensable Form menu shows information about form fields and much more.

Other Firefox Extensions

Although I have demonstrated a couple of Firefox extensions here, there are many more where these came from. For example, at the time of this writing, there were more than, 1,000 extensions on the Firefox website. Figure 9.5 shows one more example of such extensions, called Tamper Data. This extension allows us to change (tamper with) header and POST requests of a given page. This can be great for security testing, for instance. Visit the addons.mozilla.org website to see other extensions.

Figure 9.5. Firefox Tamper Data extension.

JavaScript Console

One other useful feature in Firefox worth mentioning is its JavaScript console (accessible from the Tools menu). This has helped me catch several errors with my user interfaces. It even also allows us to evaluate single-line JavaScript expressions.