Slideshow: 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
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.
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 Web site's code.
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.
JavaScript Deminifier
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.
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 lets you change or copy and apply those attributes to another page.
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."
ColorZilla
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Copyright © 2012 IDG Communications, Inc.