Out of the thousands of cool add-ons out there for Firefox, Chrome, and other popular Web browsers, only a select few make it onto the desktops of professional Web developers and designers. Which are the most useful for the day-to-day work of designing and developing websites?
Computerworld asked more than 20 professionals from across the country what they recommend to their colleagues and why. While they stuck mostly with free browser extensions, they couldn't resist throwing in a few highly useful tools and services that are accessed via a browser rather than being true add-ons.
[ Also check out 10 must-have Google Chrome add-ons. | Discover what's new in business applications with InfoWorld's Technology: Applications newsletter. | Get the latest insight on the tech news that matters from InfoWorld's Tech Watch blog. ]
Here's their hot list, where you'll find some old favorites and, we hope, discover some new tools for your arsenal.
Code inspection, editing and debugging
These three tools make the job of viewing website code and prototyping page changes fast and easy. No need to touch the live code until you're ready to commit to changes.
Authors: Joe Hewitt, Jan Odvarko, Rob Campbell, Firebug Working Group
Browsers supported: Firefox (Firebug Lite bookmarklet version available for other browsers)
Price: Free
Where to get it: Install Firebug for Firefox or Firebug Lite for other browsers
What it does: Inspects, edits and debugs website code within your browser.
Who recommends it:
- Matt Mayernick, vice president of Web development, Hudson Horizons in Saddle Brook, N.J.
- Josh Singer, president, Web312 in Chicago
- Richard Kesey, president and founder, Razor IT in Syracuse, N.Y.
- Ryan Burney, lead Web developer, 3 Roads Media in Greenwood Village, Col.
Why it's cool: Probably the best known of all the tools listed here, "Firebug is the greatest add-on ever created," Mayernick says. It's not just the fact that Firebug lets developers inspect website code and elements, but how it helps with debugging that makes the tool great. "If I am writing JavaScript that's changing the background color in a row, Firebug will show what's happening to the CSS code in real time," he says.
Firebug inspects the code by presenting the HTML and the CSS code in two side-by-side windows. "Firebug is indispensable. What's cool is you can turn styles on or off or add styles on the fly. It lets me make changes live on the page without having to save or reload the files," says Burney.
"It's great for finding JavaScript errors," adds Kesey. "When you click on an Ajax link, it reads out what the action is and gives you the response in an HTTP format so you can see what the headers were and what's happening behind the scenes."
Author: Chris Pederick
Browsers supported: Chrome, Firefox
Price: Free
Where to get it: Install Web Developer for Chrome or Web Developer for Firefox
What it does: Provides a toolkit for viewing, editing and debugging websites.
Who recommends it:
- Darrell Armstead, mobile developer, DeepBlue in Atlanta
- Jen Kramer, senior interface developer, 4Web in Keene, N.H.
Why it's cool: "I love Web Developer because of the control it gives me over any site. It gives me the ability to strip a site down to its core, and lets me modify and tweak things to get it looking and working the way I want it to," Armstead says. But that's not all he likes: "I love the Outline Block Level Elements feature because it gives me a visual representation of how a site is built on the front end."
Kramer chimes in: "What I like about it is the ability to look at CSS. It shows all of the style sheets available on the page, and I can edit those on the fly and see how it looks in the browser," she says. "That's particularly helpful to me because I work with content management systems. It allows me to style what's being sent to the browser.
"Firebug has something similar, but I find it more difficult to use. It's much harder to get a style sheet out of Firebug and into Joomla," Kramer adds. For me, Web Developer works better."
Author: Google
Browser supported: Chrome
Price: Free
Where to get it: Included with the Chrome browser. Right-click on any Web page in Chrome and choose "Inspect Element," or choose View --> Developer --> Developer Tools from the menu.
What it does: Provides tools for inspecting, editing and debugging website code.
Who recommends it:
- Jason Hipwell, managing director, Clikzy Creative in Alexandria, Va.
- Shaun Rajewski, lead developer at Web Studios in Erie, Pa.
- Ryan Burney, 3 Roads Media
Why it's cool: Developer Tools is Google's answer to Firebug for Firefox, but there's no add-on to download: Google built it right into the Chrome browser.
"It is my favorite 'extension' because of its intuitive design, with HTML on the left, CSS on the right," says Hipwell. "Inspect Element will highlight elements on a page as you hover over them, which makes it easy to find the div tag I am looking for. It gives me the ability to see changes on a live site, but those changes exist only on my local computer, making it a perfect testing environment. Its simplicity is really what makes the tool so effective."
Rajewski is also a big fan. "Developer Tools allows you to see the final output of what is rendered to [the] screen, and has the ability to highlight individual elements, view the elements' CSS tags and inherited tags, and make 'live' changes to the code to see what it looks like in the browser without making file changes," he says.
"One nice thing about Chrome's Developer Tools is that it will give you the dimensions of things," says Burney. Click on the image URL and up pops the image with the associated link, image dimensions and file type displayed. That's something Firebug doesn't do, he says. "Being able to know at a glance the dimensions of an object, that's a big time saver."
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.)
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.
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.
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.
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.
"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."
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
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."
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
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.
Enhancing performance
Want that site to load faster? These tools will help you discover what's gone wrong with a slow site while pointing out all areas where further optimization is possible.
Author: Yahoo
Browsers supported: Firefox, Chrome, Safari, Opera; also available as mobile bookmarklet and in command-line version
Price: Free
Where to get it: All versions available from Yslow site
What it does: Identifies website performance issues and recommends solutions.
Who recommends it:
- Ian Muir, lead solutions architect, Piehead Productions in Portsmouth, N.H.
- Tom Kroon, IDG
Yslow grades Web page performance in multiple categories, gives an overall score and offers specific suggestions on how to speed up your site. Click to view larger image.
Why it's cool: Yahoo's Yslow grades the performance of Web pages and offers recommendations on how to speed them up.
"It goes through all of the requests you're making, gives you warnings if you're not using optimized images and tells you what files to zip or other ways to improve client downloads," says Muir.
Page Speed
Author: Google open-source project
Browsers supported: Chrome, Firefox; Page Speed Online offers the same service without the need to add a browser extension
Price: Free
Where to get it: Install Page Speed for Chrome or Page Speed for Firefox
What it does: Runs performance tests on Web pages and suggests best practices to optimize resources on the page. Installs as a feature within Chrome's Developer Tools menu; in Firefox, it integrates with Firebug.
Who recommends it: Hassan Bawab, CEO of Web design firm Magic Logix in Dallas
Why it's cool: Page Speed gives each Web page a score and offers specific suggestions on how to improve its performance. The open-source project also includes a free Page Speed Service that automatically rewrites pages to optimize them.
Handy utilities
What does the HTTP traffic going to and from a website look like? What's a site's current IP address? These miscellaneous utilities offer quick answers.
ShowIP
Author: ShowIP Dev Team
Browsers supported: Firefox
Price: Free
Where to get it: Install ShowIP for Firefox
What it does: As the name indicates, shows the IP address of the currently displayed Web page in the browser's status bar.
Who recommends it: Jen Kramer, 4Web
Why it's cool: "When working with clients I use it to see if the DNS has been transferred from one Web host to another."
Charles
Author: Karl von Randow
Browsers supported: Add-on for Firefox only; main program works with any browser
Price: $50
Where to get it: Download from developer's website
What it does: Provides an HTTP proxy/reverse proxy tool that tracks all HTTP and HTTPS requests, responses and header information that move in or out of the browser. While Charles does include an add-on component for Firefox, at its core it is a standalone program that works with any browser installed on systems running Mac OS X, Windows or Linux.
Who recommends it: Ian Muir, Piehead Productions
Why it's cool: Charles shows the requests made by a Web page so the developer can examine the data going out and coming back. The tool formats and organizes the responses in such a way that the user can easily look through the values being returned.
"Charles is especially useful for tracking Ajax and Flash files," Muir says. "I can see exactly what Ajax and Flash are requesting and whether everything is being parsed correctly."
IE Tab
Author: Acquia
Browsers supported: Chrome, Firefox
Price: Free
Where to get it: Install IE Tab for Chrome or IE Tab 2 for Firefox