Developing your site using Firefox

As mentioned previously, I have a personal favourite browser when it comes to web development and that is Firefox. This is not only because of its good standards support (although it doesn’t yet pass the Acid 2 Test) and not because it has tabbed browsing and not because it’s any other browser other than Internet Explorer.

The thing that makes it the best development tool for me is its extensions, so I thought I’d share the ones I use (that relate to web development) with a quick rating on how useful it is. (Extensions appear in order of how they appear in my Extensions window, i.e., the order they’ve been installed in.)

• DOM Inspector

  The DOM Inspector is an extension that gets installed with the browser if you choose the ‘Custom’ installation method and select ‘Developer Tools’ when asked which components to install.

  It is useful for examing different aspects of your page including the:

  • DOM – provides information about an element, or node’s name, type and value
  • Box Model – gives information about elements’ position in relation to other elements, their dimension, margin, border and padding
  • XBL bindings
  • CSS Style Rules – shows an element as it appears in a stylesheet with the properties that apply and on which line it appears; useful for troubleshooting those inheritance or specificity problems
  • Computed Style – gives a complete list of CSS properties that apply to an element (even ones that aren’t specified in the stylesheet and which contain empty or default values)
  • Javascript Object – gives a detailed look at an element’s place in the DOM including its parent, children and siblings

• Colorzilla

  Select any colour on a page with a little eye-dropper tool. When hovering over something, it can also be used to determine an element and it’s class or ID as well as its coordinates. Once you’ve selected your colour, you can then copy its RGB or Hex value to paste into your CSS.

  It also includes its own Color Picker and an option to pop up the DOM Inspector.

• HTML Validator

  This is a great tool for quickly checking your HTML and correcting any missing tags or incorrect attributes. It shouldn’t, however, be used as a substitute for the W3C Validator as it will not pick up everthing that the validator will. You should still run your page through the validator when it is complete but for use while still putting the page together, this extension is great.

  When installed, this becomes a part of your source window (bottom left corner under HTML errors and warnings). You can either View Source, or click the little icon in the bottom right of your window which will either be a green tick, a yellow warning sign or a red cross depending on the state of your page.

• Web Developer

  This one’s the Daddy and an absolutely essential extension. It really does have too many features for me to list here, so I’ll just mention the ones I use the most (starting from the left of the toolbar).

  • Disable menu – turn javascript off and on for testing how well your pages function without javascript
  • CSS menu – used for disabling styles to make sure your page still makes sense with styles turned off; Viewing Style Information gives you a cross-hair cursor which you hover over elements to show what the element and all its parents are (good for determining where in a stylesheet you should be looking to fix a particular element); Edit CSS which enables you to edit a page’s CSS right inside the Firefox window and see the changes made automatically (no need to save and refresh all the time).
  • Images menu – turn off all the images to make sure your page still looks OK to those who surf without images.
  • Information menu – use it to see which headers for a page are sent by the server.
  • Miscellaneous menu – has an Edit HTML feature that functions like the Edit CSS feature, i.e., edit the HTML in your browser window automatically.
  • Outline menu – outline different elements on your page so you can get a better visual representation of how your page is coming together.
  • Resize menu – use it to automatically resize your window to different sizes without having to drag the corner of the window.
  • Tools menu – validate your pages’s HTML, CSS, feed, links and compliance with Section 508 and WAI guidelines. You can also validate local copies of your HTML and CSS without having to upload to a server and can view a speed report.

• Firebug

  When I first wrote this article, Firebug was at version 0.4. It’s now up to 1.0 and even though it’s still at beta stage, it looks like it may now be even better than the Web Developer extension.

  Not only can you inspect the DOM and debug your javascript, but now you can do the same with your HTML and CSS, editing on the fly. Rolling over an element in the HTML tab will highlight it on the page for you (you can view the console docked to the bottom of the browser window as in the earlier version or open it in its own window) and clicking on it will give you access to a wealth of information including a visualisation of an element’s CSS metrics, what rules are being to applied to it from which stylesheet and which rules are being overridden by others, and the elements place in the DOM and its relationship to other elements.

  There’s also a network activity tab which gives you information about the size of every element on your page and how long it takes to load.

  It’s quite hard to do proper just to Firebug in words; the best thing to do is check it out for yourself. Editing CSS isn’t quite as easy as it is with the Web Developer extension but the huge range of other things you can do with this extension more than make up for it.

• Fangs

  Emulates in Firefox how a page would be interpreted by the screen reader, Fangs. Provides you with Screen reader output as well as a list of headings and links. Even if you’re not concerned with developing for screen readers, analysing your content in this fashion will assist in making sure your pages are well structured.

• Total Validator

  Total Validator will check your page’s HTML, its accessibility up to WAI Priority 3, its links and its spelling all in a single report. It’ll also take a screenshot of your page in a variety of browsers and at different resolutions (you can only choose one option at a time though).

• X-Ray

  Enables you to view a page with the source and content appearing on the same page. Can be useful for analysing the structure of your page, but sometimes the layout gets so distorted by the addition of all the tags, that it becomes unreadable.

• Professor X

  By the developer of X-Ray, this extension will display all the content of the head of a document above the document. Makes links to the stylesheets clickable which saves you having to copy, open a new tab and then paste. Both these options are accessed by right-clicking on a page.

• TAW3

  The Web Accessibility Test extension is another that will check your page’s accessibility up to WAI Priority 3. Its report is quite comprehensive but perhaps a little harder to decipher than that of the Total Validator.

There are similar tools that can be installed for other browsers too. Opera has its own WebDevToolbar and for Internet Explorer, there is the Web Accessibility Toolbar. Both have similar features to Firefox’s Web Developer extension and all three have some features that don’t appear in either of the others.

Firefox also has several useful SEO-related extensions that I haven’t listed here.

As I come across new extensions that I find make the job of designing and developing easier, I’ll add them to this list.