DRAFT: Firefox 4’s Web Console Solves Hidden Troubles

DRAFT DRAFT DRAFT

As a long-time Web developer, I can tell you that I spend more time trying to figure out how to figure out what’s wrong than solving the actual problem I’m examining. Firefox 4’s Web Console has made an enormous difference in troubleshooting straightforward problems in CSS, JavaScript, and AJAX (interactive Web client/server JavaScript). The Web Console appears at the top of a page while you interact, and is simpler than alternatives. (Note: There’s very little up-to-date documentation for this feature, and the Mozilla link provided hasn’t been revised to reflect the final form of the feature in the 4.0 release.)

In the past, I’ve relied on the Error Console, still found in the Tools menu along with Web Console, but it’s a separate window, rather than integrated into the page. It also aggregates feedback from any pages you’ve had open, and it lumps together JavaScript error, CSS warnings, security problems, and other issues in one place. The Web Console breaks these out and allows separate display control for each kind of element.

The free Firebug extension for Firefox can be fantastically useful, too, in debugging local and network programs related to Web pages. However, it has so many features, stripping down to just what you need sometimes takes too long and too much fiddling. I also don’t recommend Firebug lightly to folks, as it requres a commitment to climb its learning curve. Web Console takes just a moment to explain. (I do highly recommend Firebug when you’re using JavaScript to modify elements in a page, as it will reveal the modified HTML while and after it’s changed.)

To get started with Web Console, with a browser window open, select Tools > Web Console. Four buttons appear across the top labeled Net, CSS, JS (for JavaScript), and Web Developer. Click on a button to disable the category or hide the entries related to it after they’ve appeared on a page load. You can click the arrow next to each name to toggle which category of items related to each subject appear. For CSS and JavaScript, you can show Errors, Warnings, or both. For Net, Errors or Log, where the Log option shows every request made by the browser to a server. For Web Developer, choose any or all of Errors, Warnings, Info, and Log.

The Web Developer field is particularly nifty, as you can use a set of JavaScript designed for debugging. For instance, you can have your script pump out the values of an array without having to use an alert(), which pops up a dialog you have to dismiss, or embed information in the page you’re looking at. (See the Mozilla documentation noted earlier for an explanation of how to use console().)(

The console also offers a command-line into which you can type raw JavaScript, such as examining the underlying document structure of part of the page using elements from the standard Document Object Model (DOM).

If that sounds too esoteric, let me give you a couple of examples of how I use it routinely.

• What didn’t load? With the Net button depressed and the Log option unchecked, I can see every file that didn’t load or otherwise caused an error all in a list.

• Troubleshoot CSS. Even though I use CSSEdit as my primary tool for crafting the style sheets that shape a page’s layout and appearance, I also manipulate them by hand. The CSS button lets me spot errors according to Firefox’s parser, and click a link at the rigth to open the CSS sheet in Firefox scrolled to the line that has the alleged error.

• Spot JavaScript problems.