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, delete, clear or view cookie information.
Not only can you view CSS, you can also edit live CSS in the cache and see what effect your changes have.
Display form details, show passwords, change GETs to POSTs, etc.
Disable or hide images, display alt attributes, image dimensions, etc.
View all sorts of details about the page from ID and class information to blocks, anchors, links, tables, document size, headers and lots more.
Show comments, show hidden elements,show a ruler on the page, etc.
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.
Define preset page sizes for testing, eg 800 x 600, 1024 x 768, etc.
Validation, DOM inspector, Error and Java consoles.
View Source, Framed Source and Generated Source.
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.
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.
3. HTML Validator
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.
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:
- 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.