Essential browser tools for Web developers

What the professionals use and recommend to their colleagues

1 2 3 4 Page 2
Page 2 of 4

JavaScript Deminifier

Author: Patrick Walton

Browser supported: Firefox

Price: Free

Where to get it: Install JavaScript Deminifier for Firefox

What it does: Lets you view the content of "minified," or compressed, JavaScript.

Who recommends it: Tom Kroon, director of systems development, International Data Group in Framingham, Mass. (IDG is Computerworld's parent company.)

JavaScript Deminifier

View the contents of compressed JavaScript files quickly with JavaScript Deminifier. (Credit: Tom Kroon, IDG)

Click to view larger image.

Why it's cool: When you get errors in scripts that are minified, you can't see into them, says Kroon. "It's nice to be able to bring up a deminified script on the fly. You can't edit it, but at least you can see a readable version of the script. That can get you the answer you're looking for."

Design assistance

When it's time to pretty up the pages, these tools make it easy to review your CSS code, find the right color schemes, find the font that fits, size up screen objects and more.

Font Finder

Authors: Ben Dodson, Eric Caron, Jake Smith

Browsers supported: Chrome, Firefox, Safari 5

Price: Free

Where to get it: All versions available via developer's site

What it does: Lets you see CSS information for selected text on a Web page.

Who recommends it: Steve Schmidt, president, Effect Web Agency in Elkhardt, Ind.

Font Finder add-on

See the font, color, spacing and other information for text on any Web page with Font Finder. Click to view larger image.

Why it's cool: This handy add-on 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. "Font Finder lets you test variations of fonts in-line with your content easily and quickly," says Schmidt.

MeasureIt

Author: Kevin Freitas

Browsers supported: Chrome, Firefox, Safari

Price: Free ($10 contribution requested)

Where to get it: All versions available at developer's site

What it does: Uses a pixel ruler tool to check width, height and alignment of any object on-screen.

Who recommends it:

• Matt Mayernick, Hudson Horizons

• Jen Kramer, 4Web

Why it's cool: Why isn't that image fitting correctly on the page? Using MeasureIt, you might quickly discover that the image that's supposed to be 200 x 100 pixels is actually 205 x 100.

MeasureIt add-on

MeasureIt shows the dimensions of the main image on Hulu.com in a small box in the upper right. Click to view larger image.

"The easiest way to update CSS is when you know the specific width and height you have available," says Mayernick. "With MeasureIt, you draw on the screen and see the width and height."

"It's a pixel-based ruler for measuring things on a Web page, and you can even draw a box around an image to measure it," Kramer says. "Before we had add-ons like this, we had to do this in Dreamweaver. It's so much faster and easier today."

ColorZilla

Author: Alex Sirota, Isoart Labs

Browsers supported: Chrome, Firefox

Price: Free

Where to get it: Install ColorZilla for Chrome or ColorZilla for Firefox

What it does: Uses a dropper metaphor to identify website colors and color palettes, and lets you adjust the colors or copy/paste them elsewhere.

Who recommends it:

• Matt Mayernick, Hudson Horizons

• Jen Kramer, 4Web

ColorZilla add-on

ColorZilla's eyedropper quickly identified the color of the Android image on Computerworld's home page and offered a palette of complementary colors. Click to view larger image.

Why it's cool: "It's the easiest way to match colors," says Mayernick. "You use the eyedropper and it picks up the color and gives it to you in hexadecimal."

"The eye dropper and color picker are incredibly helpful," says Kramer. "It can look at a Web page and generate a gradient based on the colors on that page. It creates a palette for you."

Flashblock

Author: Philip Chee

Browsers supported: Firefox; a similar add-on called FlashBlock from developer Lex1 is available for Chrome

Price: Free ($5 contribution requested)

Where to get it: Install Flashblock for Firefox or FlashBlock for Chrome

Flashblock add-on

Web developers can use Flashblock to see what the page looks like for users who don't have Flash enabled. Click to view larger image.

What it does: Prevents Adobe Flash components on a Web page from launching within the browser, replacing each with an icon. To view the Flash animation, the user must click the icon first.

Who recommends it: Ryan Burney, 3 Roads Media

Why it's cool: "We use it on clients' sites to make sure that the website would look OK for someone who can't view Flash elements," says Burney.

1 2 3 4 Page 2
Page 2 of 4
9 steps to lock down corporate browsers
  
Shop Tech Products at Amazon