Firefox extensions for web developers
Tuesday, July 4th, 2006All the coding that I do at work is web-based, so I looked for extensions to Firefox that would help me debug/troubleshoot.
Here’s what I found, that I cannot live without:
- Firebug - fantastic for troubleshooting , css, and XMLHTTPRequest… including stack traces; also contains an inspecter and some other things. Bonus: you can add javascript code for debugging (that you wont later have to remove or comment out) by using
console.debug
or console.info and a few other error levels. The XMLHTTPRequest debug output alone is worth its weight in gold (i’ve been doing a log Ajax-type stuff lately so it has come in really handy)
- Web Developer toolbar - Contains a boatload of useful things. My favorites: showing all class/id details, displaying element information as you move around a page, and ‘view source -> generated source’ (YES, you can see the source of a page that was dynamically generated without resubmitting the form (as the default ‘view source’ requires)
- Live HTTP Headers - shows you HTTP headers being sent and received real time. You can filter which sites you care about or exclude things like images. Also shows you form-related POST and GET (both requests and responses). Great for finding out what hitting Submit actually sent
- Find in Statusbar - not just for developers but anyone who wants to conserve precious screen real estate. adds a small search text box to the status bar instead of popping up a new section above the statusbar….also dont have to worry about accidentally making it pop up by certain key combinations.




