20 Chrome Extensions for Web Designers & Developers

Introduction

Considering that Google Chrome was only released in late 2008, the speed at which it has become a viable competitor to Firefox is quite astounding. While Firefox is still the number one choice for most web design and development professionals, thanks to its superior number of add-ons, Chrome is snapping at its heels and could soon become every bit as powerful.

While you might very well be resilient to the idea of switching lock, stock and barrel from Firefox to Chrome, especially if you've spent years tweaking your browser environment to your every whim, it's very important that you give Chrome a try, to experience its potential benefits and understand what other people are using.

Below, we take a look at 20 of the best Chrome extensions for web designers and developers. Rather than cover the ones you'll find in every list (such as Firebug Lite, Pendule, Aviary Screen Capture, Speed Tracer and Lorem Ipsum Generator, all of which come highly recommended), we've concentrated on some lesser known ones which are every bit as useful. Give them a go.

1. Eye Dropper

Eye Dropper lets you identify any color used on any website that you're viewing. Simply click on a pixel and you'll be provided with the associated HTML color code and RGB levels.
2. PlainClothes

With PlainClothes, you have complete control over the font style, font color, background color and link color (unread and visited) for the page that you're viewing. You can preview different color schemes and combinations to see how they work.
3. FlashBlock

FlashBlock does exactly what it says on the tin- it blocks Flash elements on a webpage, lowering memory usage, reducing CPU cycles and getting rid of annoying ads. If you want to load some Flash elements and not others- you can- no problem.
4. MeasureIt!

MeasureIt! proves that the simplest extensions are often the handiest. It lets you draw out a ruler onto any webpage to measure the pixel width and height of any element.
5. LastPass

Web designers and developers visit more websites than anybody else, meaning they're more likely to have a ridiculous number of passwords to remember. LastPass is a completely secure password manager and effective form filler, which lets you import passwords from other storage vendors like RoboForm.
6. Chrome Sniffer

An absolutely crucial extension for all web designers and developers, Code Sniffer lets you inspect the framework and JavaScript library running on the webpage you're viewing.
7. Google Tasks

This extension is useful for everybody that uses Google Tasks. It makes Gmail, Google Calendar and iGoogle accessible at all times, from any webpage.
8. Color Picker

Ideal for all web designers, Color Picker is a feature-packed color editor which gives you the Hex color code and RGB color values of any clicked color, as well as letting you adjust hue, saturation and balance.
9. Domain Availability Checker

Domain Availability Checker does exactly what you'd expect. It lets you check the availability of domain names straight from your toolbar, so that you don't have to navigate to other sites.
10. Pixlr Grabber

Pixlr Grabber lets you take screenshots of web pages (full page or selection), sharing them with others and modifying them using the Pixlr editor. If you need to take a screenshot in a hurry, this is the extension for you.
11. Web Developer

This popular Firefox extension, now available for Chrome, adds a toolbar button to your browser that's packed full of useful tools for web developers. You can Disable Styles, View CSS, Edit CSS and so much more.
12. Ibrii

Ibrii is an extension with social networking at its very core. Users can take snippets of pictures, text and even video from web pages before sharing them via Facebook and Twitter. You can even mix videos, images and text from different web pages into a single note.
13. IE Tab Classic

This extension lets you run Internet Explorer in Chrome, so you can see how web pages appear in the Microsoft browser.
14. Window Resizer

When you're making or researching a website, you're going to want to know how it will appear on screens of various sizes. If you don't want to go out and buy a monitor of every imaginable size, you can use Window Resizer- easier and much cheaper! You can even see how a webpage will appear on a mobile.
15. JavaScript Console

A little experimental, but practical all the same, this extension can be used by developers to carry out simple JavaScript prototyping on any webpage. It's similar to Greasemonkey, the Firefox extension, but not quite as goodÃ‰ yet.
16. SEOQuake

Web masters that deal with SEO will instantly fall in love with this extension, which is popular on Firefox already. It lets you delve into the SEO parameters of any webpage you're viewing, taking account of Google PageRank, Alexa and much more.
17. Image Cropper

This handy extension makes cropping images in any website possible, on the fly. Cropped images are saved as PNGs.
18. CSS Reloader

Created by Kenneth Auchenberg, CSS Reloader is a popular Firefox add-on as well as a Google extension. Once installed, users can simply press F9 to reload the CSS of any site without reloading the page itself.
19. Personalized Web

Personalize web pages on the fly with this neat little extension by adding your own custom HTML, JavaScript and CSS. It works very effectively as an AdBlocker too.
20. Inline Code Finder

Inline Code Editor's uses are limited, but what it does, it does extremely well. Quite simply, it trawls through a webpage, circling any HTML elements containing Inline JavaScript events, inline style or JavaScript: links. Tick the relevant boxes to choose exactly what to look for.
About the Author
Tom is a blogger and designer who works with an online print cartridge specialist supplying the creative industries. You can read more of his work on their blog.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.