justaddwater.dk

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.

FireFox extensions

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.

Add N Edit Cookies — I like View Cookies more, but this one can also edit the cookie value.

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

This is an impressive collection of tools. Easy to turn on/off JavaScript, CSS, images, Java. You can mark deprecated elements, show ID and class details and much, much more. The web developer toolbar website has more details, I just want to point out these few keyboard shortcuts I use:

• 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.

Bookmarklets

In addition to this, I have installed some bookmarklets in my browser. Bookmarklets are also called Favelets. Basically, it’s a URL made of JavaScript.

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.
Jesse Ruderman has an impressive collection of bookmarklets. Some of them are already included in Web Developer Toolbar. My favorites are JavaScript Shell, View javascript variables, computed CSS Style. As a side node I suggested some impovements to Javascript Shell which Jesse added to the current version.

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:
Drip IE leak detector — I know about this tool and will definately try it out next time I’m about to hunt memory leaks in JavaScript.
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.

Technorati tags: firefox extension webdeveloperwebdevelopment ie microsoft webstandards cssvista sitevista fiddler bookmarklet favelet

This entry was posted by Jesper Rønn-Jensen on Wednesday, November 30th, 2005 at 16:03 (GMT-1) and is filed under AJAX, CSS, JavaScript, Links, Web Standards. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.