Web Development

20 Chrome Extensions for Web Designers & Developers

Written by Kevin Liew on 22 Jun 2010
22,889 Views • Shares
6 comments

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
    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
    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
    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!
    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
    LastPass title=
    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
    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
    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
    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
    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
    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
    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
    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
    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
    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
    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
    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
    Image Cropper
    This handy extension makes cropping images in any website possible, on the fly. Cropped images are saved as PNGs.
  • 18. CSS Reloader
    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
    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 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.

6 comments
tee are 6 years ago
thanks for the sharing
Reply
Karl 6 years ago
There must be a 1/2 dozen or more that I just have to try. Thanks for taking the time to put this list together.

Chrome and your post rock!
Reply
Jordan Walker 6 years ago
Chrome is the bee's knee of browsers
Reply
csssample 6 years ago
Excellent Article, keep positng like this.
Reply
TS 6 years ago
No mention of FireBug?
Reply
PVMgarage 6 years ago
nice post guys, thanks for sharing.
Reply