The House of AnimeJB

Firefox Developer Extensions

By Calophi ( June 2, 2006 at 9:58 am) · Filed under Browsers, Browsers, extensions, firefox

I had made this entry in our old blog, but since that’s lost and there’s a lot more Firefox Extensions out now, I figured it’d be good to make a new list of extensions that are useful for web development.

Web Developer - A great toolbar that allows you to easily disable browser elements (css, cookies, javascript, cache, etc), outline elements on a page, edit css and html, and even view the generated source on the page - that is, what your JavaScripts print out. Way nifty.
Colorzilla - Lets you pick a color from anywhere on a website and copy it into your page. Has a color pallet that lets you fine tune your colors, too.
MeasureIt - Lets you draw a ruler on a webpage. Pretty useful for estimating space.
View Source Chart - The ultimate tool for viewing the generated source of a page. Color codes and indents everything into nice crisp boxes.
View Formatted Source - Like the View Source Chart but want to kick it up a notch? Not only does this extension view the generated source (though not as neatly organized, I think) - you can also view images by highlighting them int he source code, and the same goes for the CSS of an element! PLUS it has an inline element that allows you to select a section of the page and view it’s source. AWESOME.
FireBug - A spiffy little console that attaches to the bottom of the browser. Lets you traverse the DOM, view errors in JavaScript, XML, and CSS (and toggle them on and off!), shows you results of AJAX requests, and even gives you the option of writing messages directly to the console instead of alerting them through JavaScript. Very, VERY awesome.
Console² - If FireBug is a bit too much for you, you can always turn to Console². As of Firefox 1.5 all your error messages for XML, CSS and JS are all shoved into the same JavaScript Console. This extension renames it to an “Error Console” and allows you to toggle your error types on and off.
CSSViewer - Switch it on and then hover over any element to get it’s style in a nicely organized floating box. Very cute, but doesn’t seem to like frames very much.