Firefox Web Development Extensions

[acroyear]

Here's a reminder post about the great Firefox extensions that make web development a LOT easier...

• Make sure you go "custom" on your install and confirm that DOMInspector is enabled.  By default that's now left off and the only way to get it back is to re-install.
  
• WebDeveloper - absolutely VITAL for html and css editing and debugging, as it gives you the chance to make minor changes on the fly to see their effects without reloading the page, plus outline elements (like table cells) to figure out where your margins and paddings are screwing up the layout.
  
• Console^2 - Firefox's console can dump so many useless CSS warnings as to make it useless itself for debugging javascript.  This extension allows you to filter all of that out and stick to just the important stuff.
• Colorzilla - an eyedropper to look at any color on the screen, useful when trying to find colors to match pre-existing images.
• ViewSourceChart - block-displays the page so you can see when missing quotes and missing close tags breaks a page by seeing where subsequent code is mis-layered.
• IETab - one-click to switch rendering engines from Gecko to IE to see how that OTHER browser (that, well, everybody out there uses 'cause they don't know any better) shows a page.

Snipe also suggested Aardvark which I haven't tried yet but will as soon as I restart Firefox.

Others that look interesting include DejaClick, Fireshot, Formsaver, Inspector Widget, Life of Request Info, Firebug, ...

Comments

[sequentialscott.livejournal.com]

I use Firebug and quite like it, though the CSS editor in WebDeveloper is slightly better. It's also has good JavaScript debugging. I use Colorzilla and ViewSourceChart also.

Thanks.