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.
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)
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.
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.
Author: Chris Pederick
Browsers supported: Chrome, 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."
Browser supported: Chrome
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."