17 essential browser tools for Web developers

What are the most useful in-browser tools for Web designers and developers? Here's what the pros recommend.

Firebug
Firebug

An oldie but a goodie, Firebug for Firefox (also available as bookmarklet for other browsers) displays page code in two windows containing the HTML (lower left) and the CSS data (lower right), allowing users to alter the HTML or try out different styles on the fly.

See details and download info for Firebug.

Web developer
Credit: Jen Kramer
Web Developer

Web Developer, an add-on for Chrome and Firefox, displays the style sheets associated with a page and lets you edit them to quickly see how changes will look before making any changes to the website's code.

See details and download info for Web Developer.

Chrome Developer Tools
Credit: Clikzy Creative
Google Chrome Developer Tools

Built into the Chrome browser, Chrome Developer Tools lets you quickly see how Web page changes will look in a browser without actually changing the site. With a few clicks, Clikzy's Jason Hipwell has replaced the Computerworld background and logo with his own.

See details and download info for Chrome Developer Tools.

JavaScript Deminifier
Credit: Tom Kroon, IDG
JavaScript Deminifier

The JavaScript Deminifier Firefox add-on lets developers view the contents of compressed JavaScript files to quickly troubleshoot problems. The screenshot at left is what the developer sees after choosing to view the source of the JavaScript contents in the browser. The second is what she sees after clicking the JS Deminifier button.

See details and download info for JavaScript Deminifier.

Font Finder add-on
Font Finder

This handy add-on for Chrome, Firefox, and Safari 5 displays font, color, spacing, and other information for any text element  on a Web page, and it lets you change or copy and apply those attributes to another page.

See details and download info for Font Finder.

MeasureIt add-on
MeasureIt

With MeasureIt for Chrome, Firefox, and Safari, you can draw a box around any object onscreen to get a quick measure of its pixel size. Here the dimensions of the main image on Hulu.com are shown in a small box to the right of the image, just above the word "battleground."

See details and download info for MeasureIt.

ColorZilla
ColorZilla

The ColorZilla add-on for Firefox and Chrome uses a dropper metaphor to identify website colors, such as that of the Android image on Computerworld's home page, and lets you adjust the colors or copy/paste them elsewhere.

See details and download info for ColorZilla.

Flashblock add-on
Flashblock

Flashblock for Firefox (and the similar FlashBlock for Chrome) stops Flash elements on a Web page from loading automatically, replacing each Flash object with a button you can click to allow it to execute.  Web developers can use Flashblock to see what the page looks like for users who don't have Flash enabled.

See details and download info for Flashblock.

Yslow add-on
Yslow

Need a speed check? The Yslow add-on for Firefox, Chrome, Safari, and Opera grades Web page performance in multiple categories, gives an overall score, and offers specific suggestions on how to speed up your site.

See details and download info for Yslow.

Page Speed
Page Speed

Page Speed for Chrome and Firefox ranks a Web page on a long list of best practices and gives an overall score. Items flagged in yellow and red show areas where potential improvements can be made.

See details and download info for Page Speed.

ShowIP
ShowIP

ShowIP, an add-on for Firefox, reveals the IP address of the currently displayed Web page in the status bar at the bottom-left corner of the browser window.

See details and download info for Show IP.

Charles
Credit: Ian Muir, Piehead Productions
Charles

The HTTP proxy tool Charles shows that the Twitter widget on the Computerworld.com home page makes an asynchronous call to the Twitter API, which returns a JSON response, detailed in the lower window.

See details and download info for Charles.

IE Tab add-on
IE Tab

The IE Tab extension creates an Internet Explorer session as a tab within a Chrome or Firefox browser session, allowing developers to test for IE compatibility without actively firing up an Internet Explorer browser instance.

Each Internet Explorer tab is marked with an IE logo. New tabs can be created by clicking the IE button, shown just to the left of the Chrome wrench icon in the toolbar on the upper right.

See details and download info for IE Tab.

SEO for Chrome extension
SEO for Chrome

The SEO for Chrome extensions offers a consolidated view of a Web page's SEO data from a variety of different metrics sources, such as Alexa, Quantcast, and Google.

See details and download info for SEO for Chrome.

WebRank SEO add-on
WebRank SEO

With add-ons available for Chrome, Firefox, Opera, and Safari, WebRank SEO quickly shows you a page's rank on Alexa, Compete, and Quantcast and provides information on website backlinks, number of pages indexed with popular search engines, and related social network activity.

See details and download info for WebRank SEO.

SEO Toolbar add-on
SEO Toolbar

Firefox add-on SEO Toolbar provides the basic SEO metrics you see here for free. For more detailed metrics (the ones that say "PRO only" on the right side of SEOmoz's Site Explorer page) or to use most of the other tools shown in the drop-down menu, users need a monthly subscription to SEOmoz Pro.

See details and download info for SEO Toolbar.

Notable collaboration service
Credit: Clikzy Creative
Notable

The online collaboration service Notable lets developers break down a Web page into its component parts, upload an image of it, and share it with others. Collaborators can then attach comments to each section.

See details and download info for Notable.