Techworld

Essential browser tools for Web developers

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.

Firebug

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

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

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

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

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.

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.

"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

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

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.

Yslow

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

What it does: Runs an Internet Explorer browser session inside a Firefox or Chrome tab on any Windows computer. It loads the IE browser version currently installed on the host computer and is compatible with IE versions 6 to 9.

Who recommends it: Ryan Burney, 3 Roads Media

Why it's cool: IE Tab lets you view ActiveX controls without actively firing up Internet Explorer. (Technically, IE is running, but it appears inside a Firefox or Chrome tab rather than as a separate browser instance.) Using IE Tab saves time when doing browser compatibility testing, says Burney: "It's one less browser window you have to have running on your computer."

Boosting SEO

Web analytics services such as Alexa, Quantcast and Google Trends provide all kinds of statistics on websites, from search analysis to page ranking to average time spent on a site. The add-ons below aggregate all of that top-line data into a single view, with hot links that let you drill down.

SEO for Chrome

Author: Google

Browsers supported: Chrome

Price: Free

Where to get it: Install SEO for Chrome

What it does: Provides search engine optimization statistics for the currently displayed Web page.

Who recommends it: Joe Raio, developer, 561 Media in Boca Raton, Fla.

Why it's cool: The most popular Chrome extension, SEO for Chrome, instantly shows pages indexed, social media statistics, back links and other critical SEO data. "I use this when talking with clients to show them how little visibility they have. It gives a bird's-eye view of how many pages are indexed on Bing, Google, etc., and I get those stats instantly," says Raio.

[[xref:http://www.webrankstats.com/|WebRank SEO/WebRank Toolbar |WebRank Stats - Domain Stats, Website Stats, Website Ranks, Pages Indexed and Backlinks Checker]]

Author: ProbCOMP

Browsers supported: Chrome, Firefox, Opera, Safari

Price: Free

Where to get it: Install WebRank SEO for Chrome, Opera or Safari, or WebRank Toolbar for Firefox

What it does: Shows a Web page's rankings from Google, Alexa, Compete and Quantcast, and provides information on website backlinks, the number of pages indexed with popular search engines, and related social network activity. WebRank SEO is available for Chrome, Opera and Safari; the Firefox version is called WebRank Toolbar.

Who recommends it:

• Steve Herz, president, Web design firm Moonstone Interactive in San Ramon, Calif.

• Josh Singer, Web312

Alexa, Compete and Quantcast use different formulas to get to the same metrics. WebRank puts the results from all three in one place. "We look at them all, and if they're consistent, that tells us something," says Herz. If they all agree, he can feel confident that the volume rank and other data are accurate, he says.

"It gives you an idea, at a very high level, of how your page is doing, search-engine-wise," says Singer.

SEO Toolbar/Mozbar

Author: SEOmoz

Browsers supported: Chrome, Firefox

Price: Free (SEOmoz Pro account: $99/mo.)

Where to get it: Install Mozbar for Chrome or SEO Toolbar for Firefox, or start SEOmoz Pro trial

What it does: Offers basic SEO data, including page rankings and page/domain authority (a prediction of whether a page you've created will rank well once it launches). The Chrome extension is called Mozbar; the Firefox version is called SEO Toolbar on the downloads page but appears in your Add-ons Manager as MozBar.

Who recommends it:

• Shawn Nafziger, SEO director, Effect Web Agency

• Jason Hipwell, Clikzy Creative

Why it's cool: "SEO [Toolbar] for Firefox puts everything I need in one place. I can compare the important metrics of an entire page of Google search results at one time," says Nafziger.

The free toolbar provides basic SEO metrics such as inbound links, top pages and linking domains. To get more detailed data, such as keyword analysis and optimization recommendations, or to run more than three reports per day, you'll need an SEOmoz Pro service subscription, which costs $99 per month.

"The toolbar is extremely helpful because it pulls back-link data automatically into the toolbar," Nafziger adds. "It also allows me to highlight no-follow, internal and external links. Plus, I can quickly see page elements using the Analyze Page overlay."

Collaboration

Working with clients on website designs requires a lot of back-and-forth. The following tool can facilitate that communication by allowing online collaboration as the design progresses.

Notable

Author: ZURB Inc.

Browsers supported: Chrome, Firefox, Internet Explorer 8 and 9, Safari

Price: Starts at $19/mo.

Where to get it: Sign up at the Notable site

What it does: Allows Web-based collaboration for website development and review. The service includes a browser add-on that lets you upload screen images for group review and markup.

Who recommends it: Jason Hipwell, Clikzy Creative

Why it's cool: "Notable makes it easy to share designs with a client," Hipwell says. Anyone can make comments directly over a shared image, which can help expedite design approvals.

"We use it for internal designs and client material. Then when we move to development, the page images are put in Notable and all aspects of the site are labeled so the entire development team has an idea of what each project entails," says Hipwell. "It's great for collaboration, and we can always go back and see what someone said."

Related reading: Real Web developers don't use browser add-ons

More about: Acquia, Adobe, Creative, etwork, Google, IDG, Inc., International Data Group, Kramer, Linux, Speed, Topic, Yahoo, ZURB
References show all
Comments are now closed.
Related Whitepapers
Latest Stories
Community Comments
Whitepapers
All whitepapers

Top Whitepapers

Twitter Feed

Featured Whitepapers