I 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 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:
-
Disable
Allows you to disable anything from Java to JavaScript, Cache, Meta redirects to colours.
-
Cookies
Disable, delete, clear or view cookie information.
-
CSS
Not only can you view CSS, you can also edit live CSS in the cache and see what effect your changes have.
-
Forms
Display form details, show passwords, change GETs to POSTs, etc.
-
Images
Disable or hide images, display alt attributes, image dimensions, etc.
-
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.
-
Miscellaneous
Show comments, show hidden elements,show a ruler on the page, etc.
-
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.
-
Resize
Define preset page sizes for testing, eg 800 x 600, 1024 x 768, etc.
-
Tools
Validation, DOM inspector, Error and Java consoles.
-
View Source
View Source, Framed Source and Generated Source.
-
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 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
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.
