Slideshow: Essential browser tools for Web developers

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, 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 Web site's code.

See details and download info for Web Developer.

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.

The JavaScript Deminifier Firefox add-on lets developers view the contents of compressed JavaScript files to quickly troubleshoot problems. The screen shot 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.

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 lets you change or copy and apply those attributes to another page.

See details and download info for Font Finder.

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.

The ColorZilla add-on for Firefox and Chrome uses a dropper metaphor to identify Web site 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 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.

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 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, 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.

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.

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.

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.

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.

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.

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.