Essential browser tools for Web developers
What the professionals use and recommend to their colleagues

Computerworld – 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?

Browser tools for Web devs

Code inspection, editing and debugging
Design assistance
Enhancing performance
Handy utilities
Boosting SEO
Collaboration

 

Best Microsoft MCTS Certification, Microsoft MCITP Training at certkingdom.com

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.

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
Firebug displays the page’s HTML code in the lower left window and its CSS data in the lower right. Click to view larger image.

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 https: format so you can see what the headers were and what’s happening behind the scenes.”
Web Developer
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.”
Web Developer add-on
Web Developer displays the style sheets associated with a page and lets you edit them to quickly see how changes will look before actually making any changes to the website’s code. (Credit: Jen Kramer)
Click to view larger image.

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.”
Google Chrome Developer Tools
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.”
Chrome Developer Tools
Using Chrome Developer Tools, Clikzy’s Jason Hipwell has replaced the Computerworld logo with his own in just a few clicks. (Credit: Clikzy Creative) Click to view larger image.

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

Best Microsoft MCTS Certification, Microsoft MCITP Training at certkingdom.com