Essential web development tools for Firefox

Firefox eats IEI was chatting with a friend online this evening (hello Steve!) about web coding, and I offered him my three favourite add-ons for Mozilla Firefox which I find absolutely essential for coding and debugging HTML, CSS and JavaScript.

Work in Firefox, debug in IE

When developing code I tend to always work with Firefox first. When I’m happy that my code is working properly, I’ll then test it in Opera and Safari and only then will I check it out in Internet Explorer 6 and 7.

And then typically I’ll spend the next fortnight debugging my nice clean code in IE, trying to find workarounds that will make my pages work properly in the world’s favourite (and most terrible) browsers.

It’s only the most popular because people are too lazy to install something better. Or don’t realise that there is something better. “But it looks okay to me…!”

Seriously, if there was a car that killed as many people as IE kills good quality web code, it would be banned in a flash.

1. Web Developer

Web Developer toolbar

Web Developer by Chris Pederick adds a toolbar and a new submenu to Tools to Firefox, which are absolutely packed with web developer tools.

There are 12 main sections on the toolbar, which give you access to all the tools and features:

  1. Disable
    Allows you to disable anything from Java to JavaScript, Cache, Meta redirects to colours.

  2. Cookies
    Disable, delete, clear or view cookie information.

  3. CSS
    Not only can you view CSS, you can also edit live CSS in the cache and see what effect your changes have.

  4. Forms
    Display form details, show passwords, change GETs to POSTs, etc.

  5. Images
    Disable or hide images, display alt attributes, image dimensions, etc.

  6. Information
    View all sorts of details about the page from ID and class information to blocks, anchors, links, tables, document size, headers and lots more.

  7. Miscellaneous
    Show comments, show hidden elements,show a ruler on the page, etc.

  8. Outline
    This is one of my favourites — here you can single out a particular page element and find out the markup, class and ID information. Essential for debugging or writing CSS.

  9. Resize
    Define preset page sizes for testing, eg 800 x 600, 1024 x 768, etc.

  10. Tools
    Validation, DOM inspector, Error and Java consoles.

  11. View Source
    View Source, Framed Source and Generated Source.

  12. Options
    Options, Help and About.

I use this add-on all the time, particularly for debugging code or learning about someone else’s code.

It is designed for Firefox, Flock, Mozilla and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

2. Firebug

Firebug

Firebug offers a few similar features to Web Developer but it really comes into its own with its own separate window. Here you can explore the HTML, CSS, JavaScript, all viewable by DOM, Styles or Layout.

Two of my favourite features are the ability to point at a line of code in the Firebug source view and the corresponding section of the actual page is highlighted (check out the blue highlight in the screenshot above), showing you exactly what that code relates to on the finished page. It even shows margins and padding in different colours (yellow and purple).

It will also show you the CSS cascade: which CSS rules are being used for that section of the page, and which are being overruled.

Firebug will also allow you to edit HTML, CSS, and run live JavaScript on the cached page, making it one truly remarkable and powerful add-on to your web developing toolkit.

3. HTML Validator

0 errors / 0 warnings

HTML Validator is an add-on that shows HTML validation information within your Firefox browser window, rather than having to go to a separate site, such as http://validator.w3.org.

The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.

It really is that simple. You can specify the type of validations to check, including accessibility.

Conclusion

Those are my top 3 web developer add-ons. Of course, Microsoft also has its own Internet Explorer Developer Toolbar, but to be honest compared with the polished and precise offerings for Mozilla, the IE version has the elegance of performing open-heart surgery with a wooden spoon and a spanner.

Other developer-related add-ons that I’ve used, include:

  • JavaScript Debugger – This is Mozilla’s official JavaScript debugger, code named Venkman, which aims to provide a powerful JavaScript debugging environment for all Mozilla based browsers.
  • View Source Chart (creates a colourful chart of a web page’s rendered source code, which can be very useful.
  • UrlParams – Shows you the GET and POST parameters of the current website in the sidebar, and allows you to edit and submit your own values. Useful for testing forms.
  • Operator and Tails – two add-ons for showing Microformats information .. but that’s for another blog post

I tend to keep most of these installed (apart from the Microformats add-ons) but disabled, and only enable them when I need them. That way they are close at hand, but don’t take up valuable system resources for the 99% of time that I’m not using them.

5 thoughts on “Essential web development tools for Firefox”

  1. I don’t know if you intended to put them in an order, but personally I use Firebug far more often than Web Developer Toolbar now. Theres a video on YUI Theater [sic] where Joe Hewitt explains some of the features – I learnt a lot watching it!

    The other tool I use quite often, and wonder how I ever managed without it is Colorzilla which offers a very simple colour picker from anywhere on a webpage. It can even copy the hex code to the clipboard for you.

  2. Hi Mike, thanks for the link to Joe Hewitt’s demo at Yahoo! I’ve downloaded the MP4 file and will watch it later.

    I did put them in order — I currently use the Web Developer Toolbar most often, but I use Firebug for longer, if that distinction is clear.

    I’m looking forward to learning more about Firebug from the video, though.

    I tried out Colorzilla but it wasn’t doing anything that my other colour tools didn’t do, so I uninstalled it to save Firefox resources.

    Does anyone else have any favourite development tools?

  3. Spot on. Exactly the tools I would have said. I also use something for color matching, the color picker add on which creates a photoshop pallette of colors used on any web page at the touch of a button. Great stuff.

    This excellent bookmarklet I found last week may be of interest to you – helps me a LOT when checking out IE issues:

    http://westciv.com/xray/index.html

    Once you can get the bookmark saved properly on IE (took me a little while!) it’s a great way to find and solve box model, double float margin and many other IE5.5/6 bugs.

Leave a Reply

Your email address will not be published. Required fields are marked *