If you use Firefox (you are using Firefox, right?) and you do anything even remotely related to web development - including maintaining a blog - you must download the Web Developer Toolbar.

This toolbar allows you to do everything from disable images to editing CSS live or even viewing response headers. 

If you’re editing CSS, it opens a sidebar with the current stylesheets loaded in separate tabs on the left.  As you type in each stylesheet, the styles are updated on the page to the right.  You can save and load stylesheets for future editing purposes.  It’s handy for checking out a site to see how they pulled off a CSS trick.

Another nifty trick is viewing block sizes in your document.  It applies a border to all of your display:block elements and places a tooltip-like label in the top-left corner of the block with the size information.

I could list every feature in this application, but it would take a few dozen posts.  Check it out!

Read full post