With the release of Firefox 1.5, I thought it’s time to make a round up on the tools and plugins that makes my everyday work faster, more efficient. Here are some of my favorite tools for Firefox and a few for Internet Explorer.
HTML validator (based on Tidy) — Validates all pages I visit and shows an icon based on the result. Discreet, unobtrusive and very effective in showing that pages are valid. One note, though: HTML Tidy seems to be more strict than the ordinary HTML validator, so a valid page sometimes shows errors. I see it this way: If this plugin validates, the code validates!
Live HTTP Headers — Good tool for debugging AJAX calls and a good tool to learn about other interesting webservices. Turn it on and visit Google Maps. It will show all about the calls your browser makes to the webserver. Also, it shows what HTTP headers your browser send, and what it recieves.
IE view — Right click a page to show the page in IE.
Screen grab! — Easy screenshots of your browser window (requires Java). It works very good for me, as I do a lot of prototyping work and print screenshots.
Adblock — I have a disability: It’s the opposite of banner blindness: Banner distraction. I’m sometimes so distracted by banner ads that I cannot read text. Adblock removes annoying banner ads. Recently I also started using Adblock Filterset.G Updater
Slim Extension List — Collapses extension list and makes it easier to see what extensions I have.
Web developer toolbar — Impressive collection of web developer tools. See below for details.
Web developer toolbar for Firefox
- CTRL-SHIFT-E: CSS live edit
- CTRL-SHIFT-A: HTML validator of local file
- CTRL-SHIFT-S: Toggle CSS stylesheets on/off
Unfortunately, Display ID and class details has no keyboard shortcut (probably the feature I use the most). I must say that the developers has done a good work for accessibility by implementing keyboard shortcuts. Nice!
IE developer toolbar
Via the IE blog I learned about the IE developer Toolbar. It’s like web developer toolbar for Firefox, only smaller (less functions). It has a DOM inspector, though, which is kind of cool when I sometimes see that Firefox and IE DOM models differ.
Fiddler HTTP header viewer for IE
Fiddler is a power tool for Internet Explorer and is fantastic for debugging. Its like Live HTTP Headers for Firefox and in addition it has the ability to view the content of the HTTP packets. Indispensable for debugging, but last time I used it, it lacked support of https protocol. So I couldn’t debug on websites with secure login. Hope they fix this in a future release. Heres an article on using Fiddler as a debugging tool.
Some bookmarklets for investigating the webpage
Steve Chipman working for AOL has a good collection. Slayeroffice favelet suite, mouseover DOM inspector, and page info are my favorites.
One final bookmarklet. I made my own cookie editor. Its limited to your current domain and shows all cookies as a list. You can edit both the name and the value. A link is available on my bookmarklet page on VisitJesper, my personal website. It works both in Firefox and IE.
Other tools worth a mention:
CSS Vista from the SiteVista team. A tool where you can live-edit CSS and view the result simultaneously in Firefox and IE.
Read more and give feedback
If you want more, there is a good presentation about Rapid web development and testing with Firefox. Please share with me, what tools you use in webdevelopment, and why.