Mozilla released Firefox 1.5 at the end of November last year and one of its features is on auto-update mode. I note that I am now running 1.5.0.1 that was released on the 1st of February 2006.
According to the release notes, Firefox comes with faster browsing, automatic updates, tabbed browsing, improved popup blocking, integrated search, stronger security, live bookmarks, accessibility, customisability and next generation web support.
Laudable as all these features are, we are just going to focus on developer goodies, particularly in the area of customisability.
Out of the box, Firefox 1.5 comes with the DOM inspector, but only if you choose custom installation and then tick developer tools. Once installed, the DOM inspector is visible on the tools menu or CTRL/SHIFT/I.
Reinstallation seems to be the only way to activate the DOM inspector, but all the local settings seem to be preserved. Once the DOM inspector is installed, it is possible to examine any web page in a structured manner. An example is shown here:
Note that it is easier to navigate a modern web page where element IDs and style class-names are extensively used. An old fashioned web page that is laid out with table elements is still something of a chore to navigate. The inspector has two main panels that can be independently configured. The left hand panel can show DOM Nodes, style-sheets or JavaScript objects. Depending on the context, the right hand panel can be configured to show the DOM model, CSS rules applied to the current element, JavaScript object and XBL bindings.
Ever since the early betas of Firefox, it has been customisable. There are four ways of enhancing Firefox: plugins, search-engines, themes and extensions.
A plugin is a mechanism for consuming and rendering a resource type with the most common being Acrobat and Flash.
Firefox has a search box on the right of the toolbar that provides a Google search by default. However, as you can see from the screenshot, it can be extended it with a number of different searches.
Searches can be displayed either with a normal web page or with a SearchSidebar extension. Searches are extremely simple to develop (six XML tags) and a local search toolbar for Trademe is available from www.berm.co.nz.
The final and most powerful type of Firefox add-on is an extension. An extension is typically a small application that adds functionality to the browser. This could be a utility for accessing weather forecasts or checking spelling, or even providing web developers with more tools. Three particular extensions are worthy of mention here: Firebug, Web Developer Toolbar and the Venkman JavaScript debugger.
Firebug
This provides the web developer with 3 useful tools:
1. A resizable console at the bottom of the screen for examining HTML and XML elements. While most of this functionality is available in the DOM inspector, the Firebug console feels more comfortable on older web pages laid out using tables.
2. An excellent error-reporting log. By default, JavaScript errors are swallowed by Firefox to improve the user’s browsing experience.
Firebug has a little icon on the status line similar to MS-IE that says whether the page render was valid and error-free. Clicking on the error icon opens Firebug to show further details.
3. For the brave Ajax developers, Firebug has a trace window for XML HTTP requests.
Web Developer Toolbar
This extension provides a rich toolbar that provides a number of really useful ways of changing the behaviour of the browser without changing the HTML code. A web developer toolbar is added to the browser with 12 drop-down menus.
Each drop-down menu averages over 12 items, so there are over 150 menu items to use and it would not be appropriate to describe them all here. A couple of the items hook into WAI and section 508 accessibility checks for US government work, but the rules apply equally to the quality control of any public website. There are also links for validating CSS, HTML and RSS feeds, as well as checking hyperlink existence.
Several of the browser options allow testing of web pages without changing the HTML. These include turning on and off cookie support for session checking, checking print-specific style layout without printing, disabling styles, populating form fields and switching between GETS and POSTS.
JavaScript debugging – Venkman
Any sort of software development without runtime diagnostics can be a little tedious. Dump and trace statements are all very well, but a developer needs to be able to step through code, set breakpoints and look at the current value of variables.
The Venkman JavaScript debugger does all that and more, as can be seen from the screen shot below:
Unfortunately, the Mozilla site seems unable to keep the links of this extension up to date with their latest version of the browser, but it is possible to download the latest version from http://getahead.ltd.uk
Intranet development
All the tools above can help the web developer with public sites that are rendered with Firefox, Internet Explorer or Opera. For private sites, XUL (the Mozilla XML User interface mark-up language) and JavaScript provide a very powerful platform for rich thin client development. One potentially far-reaching change is that Firefox 1.5 now supports the canvas object for easy JavaScript drawing.
International standards support
While Firefox 1.5 is still stuck with JavaScript 1.5, it does now support a reasonable subset of SVG (scalable vector graphics), XFORMS and XML events, as well as the evolving E4X standard that allows easy walking round an XML document from JavaScript.