Follow Us

We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message

The most essential tools for web developers

Tricky CSS giving you a headache?

Article comments

Out of the thousands of cool addons 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 addons.

Here's their hot list, where you'll find some old favourites 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; Josh Singer, president, Web312; Richard Kesey, president and founder, Razor IT; Ryan Burney, lead web developer, 3 Roads Media

Why it's cool: Probably the best known of all the tools listed here, "Firebug is the greatest addon 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 colour 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; Jen Kramer, senior interface developer, 4Web

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.

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; Shaun Rajewski, lead developer at Web Studios; 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 favourite '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, IDG

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 colour 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

Why it's cool: This handy add-on displays font, colour, 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
  • 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 addons 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 colour palettes, and lets you adjust the colours 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 colours," says Mayernick. "You use the eyedropper and it picks up the colour and gives it to you in hexadecimal."

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

Flashblock

  • Author: Philip Chee
  • Browsers supported: Firefox; a similar addon called FlashBlock from developer Lex1 is available for Chrome
  • Price: Free
  • Where to get it: Install Flashblock for Firefox or FlashBlock for Chrome
  • 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 optimisation 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; Tom Kroon, IDG

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 optimised 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 optimise 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 Magic Logix

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 optimise 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: Addon for Firefox only; main program works with any browser
  • Price: $50 (£30)
  • 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 addon 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 organises 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 optimisation statistics for the currently displayed web page
  • Who recommends it: Joe Raio, developer, 561 Media

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.

WebRank SEO/WebRank Toolbar

  • 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, Moonstone Interactive; Josh Singer, Web312

Alexa, Compete and Quantcast use different formulae 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
  • 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 Addons 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 optimisation recommendations, or to run more than three reports per day, you'll need an SEOmoz Pro service subscription.

"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
  • 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 addon 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 labelled 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."


Share:

More from Techworld

More relevant IT news

Comments



Send to a friend

Email this article to a friend or colleague:

PLEASE NOTE: Your name is used only to let the recipient know who sent the story, and in case of transmission error. Both your name and the recipient's name and address will not be used for any other purpose.

Techworld White Papers

Choose – and Choose Wisely – the Right MSP for Your SMB

End users need a technology partner that provides transparency, enables productivity, delivers...

Download Whitepaper

10 Effective Habits of Indispensable IT Departments

It’s no secret that responsibilities are growing while budgets continue to shrink. Download this...

Download Whitepaper

Gartner Magic Quadrant for Enterprise Information Archiving

Enterprise information archiving is contributing to organisational needs for e-discovery and...

Download Whitepaper

Advancing the state of virtualised backups

Dell Software’s vRanger is a veteran of the virtualisation specific backup market. It was the...

Download Whitepaper

Techworld UK - Technology - Business

Innovation, productivity, agility and profit

Watch this on demand webinar which explores IT innovation, managed print services and business agility.

Techworld Mobile Site

Access Techworld's content on the move

Get the latest news, product reviews and downloads on your mobile device with Techworld's mobile site.

Find out more...

From Wow to How : Making mobile and cloud work for you

On demand Biztech Briefing - Learn how to effectively deliver mobile work styles and cloud services together.

Watch now...

Site Map

* *