Mozilla Firefox for Rapid Web Development and Testing
Version 1.0 was recently released after two years of development, so now may be a good time to evaluate this browser's capabilities.
"Out of the box" Mozilla Firefox offers a variety of features catering to both occasional Web surfers and power users. The more advanced functionality can be particularly noted as a real time saver during the Web development process.
Standards-compliant Rendering Engine
Based on the Mozilla Application Suite , Firefox's page rendering (as well as the complete rendering of the user interface itself) is handled by Gecko. First implented for Netscape 6.0, this rendering engine has proven to be very close to the official W3C  recommendations in relation to behaviour and display. As a result, Web pages that render correctly in Firefox are more likely to work reasonably, if not perfectly, well in most other standards-compliant browsers with only minor adjustments. Compare this to the all too frequent practice of designing for Internet Explorer (with its notoriously flawed rendering engine), Firefox saves a significant amount of time to ensure a consistent result in other browsers.
Extensive Page Information
Where other browsers may attempt to hide a lot of complex information from the user, Firefox offers comprehensive page information dialogue clearly aimed at the more technically minded audience. MIME type, character encoding, meta information included in a document's head section and listings for all form elements, links and media files are all collated and give the user a comprehensive overview of the currently loaded Web page.
User-friendly view source
Rather than sending the source code to an external text editor, Firefox uses its own source viewer with syntax highlighting, which colour-codes the various tags, and line wrapping.
When content on a Web page is highlighted, Firefox also offers the option to view selection source from its context menu. This will open an abridged version of the source code view, with the selection's markup highlighted in the source. This reduces the need to 'hunt' for a specific section of a Web page in the overall source code.
The DOM inspector is a powerful tool that gives developers direct access to the Document Object Model - the tree-like structure of the current page. For each element in the DOM, the inspector provides a comprehensive collection of information, including the list of CSS styles currently affecting the element and the computed styles that are effectively being used (after all things like font size inheritance and percentage values have been calculated).
A unique feature of Firefox is the comprehensive level of customisation of the actual browser interface than can be performed by the user. 'Right-clicking' anywhere in the browser's top interface gives the option to enable/disable certain toolbars, as well as providing access to the customisation dialogue. By dragging/dropping interface elements between the dialogue window and the browser interface itself, and reorganising elements that are already in place, users can make sweeping changes to suit their preferences and way of working.
Beyond the default features already present in Firefox, the real strength of this browser lies in its extendibility. Further refining the concept of 'extensions' from the main Mozilla suite, Firefox offers a framework that enables users to customise the program's features and capabilities to match their particular needs.
Here is a brief look at three extensions that I personally find to be most useful:
Adding Options to the Context Menu
Figure 6: 'view this page in IE'
Figure 7: 'open link target in IE'
With regard to IE View : Many extensions add very small and specific features to Firefox that may initially appear to be trivial, but save time during general browsing and Web development. This extension is a good example: it adds options to the context menu (normally accessed through right-clicking the mouse over a Web page) that allow the user to open the current page or the target of a link in Internet Explorer. Normally, developers would resort to copying/pasting a page's URL between address bars. This process is now streamlined into a single click.
An HTML validator extension can also prove useful .It can often be difficult to validate Web pages, particularly when working on restricted resources like an intranet.
As the W3C validator can't be allowed to access the page directly, the source code needs to uploaded as a file. This becomes frustrating when working with dynamically generated pages, because you can't simply send your unprocessed ASP/PHP/etc documents. To work around the issue, developers would either access the relevant page from the restricted server, save the HTML from within the browser and upload the resulting file, or set up a local validation service. The HTML validator extension painlessly takes care of the latter, by integrating a customised version of Tidy  with the default View source functionality.
Originally developed by the W3C, Tidy not only reports any problems it may encounter in a page's markup, but also offers the function to fix the issues and clean up the document.
Web Developer Toolbar
To cover all the features of this extension would require a whole series of articles, but a few of the most interesting are briefly introduced below.
This menu contains a variety of commands to place visual, colour-coded borders around elements on the page. Particularly useful for debugging CSS driven layouts, these outlines give a good "at a glance" overview of the overall page structure and help highlight certain elements of the markup in a quick and intuitive fashion. Additionally, the name of outlined elements can be displayed by enabling the relevant option in the toolbar's preferences.
Display ID & Class Details
As the name suggests, this option - found in the generic Information menu - displays any element ID and CSS class. Combined with the outline commands, this option can be helpful in providing a quick overview of page structure without the need to examine the markup.
This opens a sidebar that displays any stylesheets linked to from the current page and allows users to edit the style rules on the fly. It's an excellent way to test and prototype changes and additions to a page's CSS quickly, this option can be particularly useful when debugging the presentation of an online Web page without the need first to download the document and related CSS files.
Mozilla Firefox offers core functionality, making it ideally suited for Web development and testing applications. Through the addition of a whole range of extensions, many complex commands can further be integrated directly with the browser, in many cases removing the need to rely on external applications. Firefox can be turned into a quick prototyping environment, particularly when working with Web standards and CSS driven layouts. This additional functionality is invaluable during debugging and troubleshooting sessions.
- Mozilla Firefox product page, http://www.mozilla.org/products/firefox/
- Mozilla Application Suite product page, http://www.mozilla.org/products/mozilla1.x/
- World Wide Web Consortium, http://www.w3.org/
- Mozilla XUL Documentation, http://www.mozilla.org/projects/xul/
- mozillaZine's Extension development documentation project, http://kb.mozillazine.org/Extension_development
- Mozilla Update - Firefox extension repository, https://addons.update.mozilla.org/extensions/?application=firefox
- IE View extension, http://ieview.mozdev.org/
- HTML Validator extension, http://users.skynet.be/mgueury/mozilla/
- HTML Tidy Library Project, http://tidy.sourceforge.net/
- Chris Pederick's Web Developer Toolbar extesnion, http://www.chrispederick.com/work/firefox/webdeveloper/