Articles & Tools

You're reading my blog on the art, business and culture of web site design. After you enjoy this article, check out my portfolio and get in touch to learn how I can make your next web project your best yet.

The Firefox utility belt: three great extensions for web developers

Working efficiently and effectively is all about having the right tools at your disposal. Thanks to the openness of the Firefox web browser, some great developers have provided tools to make the everyday life of the web developer a lot easier. Check them out, add them to your utility belt, and fill us in on your own favorite extensions in the comments.

Screengrab

The Screengrab extension makes it a breeze to take quick screenshots from your browser -- I used it all the time for development and debugging, since it allows me to copy the screen to the clipboard or save it to a file to send to a client or colleague. It also allows you to create an image of an entire web page, even beyond the visible area, which is great for showing a clip of a larger page in your portfolio.

Web Developer Toolbar

One of my first and favorite Firefox extension discoveries, the Web Developer toolbar gives you control over just about every variable of your Firefox experience. You can switch off CSS or JavaScript, selectively clear your cache, resize your window, and much more. My favorite trick is a keyboard shortcut that outlines all the various divs and elements on my page, allowing me to easily break down the pieces of a page that I am building or debugging.

Firebug

For more advanced CSS debugging, you can't beat Firebug. Through its dialog, you can inspect the CSS of any element on your page, including all the attributes it inherits from its parent elements, making it a snap to pinpoint the source of a CSS error or inconsistency. You can even edit your CSS on the fly via Firebug and see the results rendered in the browser -- great for quick debugs or testing your ideas on a site where you don't have direct access to the CSS.

About the Author

Rob Howard

Rob Howard is the web developer who speaks your language. As the founder of Howard Development & Consulting, he works exclusively with designers and creative firms to deliver top-notch HTML/CSS, JavaScript, Wordpress and ExpressionEngine content management system development. He's built sites for Harvard, MIT and the Holocaust Museum, and his start-ups have been praised in BusinessWeek, Entertainment Weekly and PC Magazine.

← More Articles & Tools

Get in Touch
Ready to learn more?
Contact Rob today at (303) 800-6075 or info@howarddc.com.