17 Google Chrome Extensions for Web Designers and Developers

by Steven Snell

February 15, 2010 in Resources

Firefox is the browser of choice for most designers and developers in part because of the vast selection of add ons that are available. While Chrome does not offer anywhere close to as many extensions (yet), there are still a number that can be very handy for designers and developers. In some cases they are not as robust as the Firefox versions (example, Firebug and Firebug Lite), but if you are using Chrome you may be interested to know about the extensions that are available. Additionally, Chrome comes with some developer tools built in.

In this post we’ll feature 17 of the most useful Chrome extensions for designers and developers. Hopefully in time the selection and quality of Chrome extensions will be able to rival those of Firefox.

Speed Tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Speed Tracer

Firebug Lite

Firebug Lite is a tool for web developers, that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug Lite

Pendule

Pendule displays linked and embedded style sheets of the current page in a new tab. It reloads the style sheets for the current page on the fly, so you don’t have to reload the whole page for each change, and also disables CSS for the current page.

Pendule

Eye Dropper

Eye Dropper and Color Picker extension which allows you to pick color from any webpage or from advanced color picker.

Eye Dropper

Aviary Screen Capture

With Aviary Screen Capture you can take a screenshot of any webpage and edit it directly in your browser with Aviary.com applications. Plus convenient access to the Aviary website and tools.

Aviary Screen Capture

PlainClothes

PlainClothes styles — or rather “unstyles” — the web. Just imagine: text is black, backgrounds are white, unread links are blue, visited links are purple, all links are underlined. Or any other colors you like. And all text is rendered in your default fonts (as defined in “Options” > “Under the Hood” > “Change font and language settings”). Everywhere. Automatically.

PlainClothes

Chrome Sniffer

Chrome Sniffer will help web developers to inspect web framework / CMS and javascript libraries running on websites while browsing. An icon will appear on the address bar indicating the detected framework.

Chrome Sniffer

Lorem Ipsum Generator

The Lorem Ipsum Generator extension creates random dummy “Lorem Ipsum” text.

Lorem Ipsum Generator

Chrome SEO

The Google Chrome SEO Extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks, PageRank Checks and other daily SEO tasks.

Chrome SEO

IE Tab

IE Tab will allow you to use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome. Great for web developers who want to test the IE rendering engine, users who use sites with ActiveX controls, and users who want to use the explorer view for local files (i.e. file:// URLs).

IE Tab

Resolution Test

Resolution Test is an extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions.

Resolution Test

MeaureIt!

With MeasureIt! you can draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

MeaureIt!

Validity

Validity can be used to quickly validate your HTML documents from the address bar. Just click the icon in the address bar to validate the current document without leaving the page. The number of validation errors can be seen in the tool tip.

Validity

Snippy

Snippy allows you to grab snippets of web pages and save them for future use. Snippy capture rich contents and preserves formatting, so you can capture paragraphs, images, links and more.

Snippy

META SEO Inspector

META SEO Inspector can be useful to inspect the meta data found inside web pages, usually not visible while browsing.

META SEO Inspector

LastPass

LastPass is a free online password manager and Form Filler that makes your web browsing easier and more secure.

LastPass

Google Tasks

The Google Tasks extension allows you to access Google Tasks from any web page at any time. Great for just jotting something down or checking your agenda.

Google Tasks

For more design resources please see:

Powered by Shutterstock

About Steven Snell

Stephen Snell is the owner and editor of Vandelay Design.Connect with Stephen on google+

  • Zach

    Feb 15th

    great roundup! Featured at http://zachkrasner.com !

  • Julian

    Feb 15th

    Great line-up. Definitely bookmarking!

  • Joel

    Feb 15th

    Great list, I had to grab a few, they’ll for sure come in handy when I need to make changes to my site.

  • Jonathan Foucher

    Feb 16th

    Install Speed Tracer (by Google) ?

    This extension will have full access to your computer and private data.

    —>CANCEL

    I couldn’t believe what I saw. It’s the first extension that wants such permissions. Can’t have that! Pity, because it looked really nice…

  • Chris Olbekson

    Feb 16th

    I fully switched over to Chrome about a month ago and I am loving all the new extensions coming out. I still miss Firebug, but thats about it.

  • MyLifeTweets

    Feb 16th

    Thank you for a great list of extensions.
    Firebug being one of my favourite tools.

  • New York Web Designer

    Feb 16th

    You made my day.. Awesome List.. I have been using extension only in Firefox. By the lunch of Extension for Chrome is making my surfing even better.

    thanks for the mega list…

  • prafuitu

    Feb 16th

    I’d like to recommend you my alternative to “Resolution Test”: that’s “Window Resizer”

    Some of the features that (I like to think) makes it better than the other, is the ability to add your own customized resolution presets and the option to resize either the entire window or just the viewport.

  • Chad

    Feb 16th

    Great list!! I love Chrome and have been using it more and more (as I am looking forward the implementation of the ChromeOS). But I find myself going back to FireFox for work as it has all the add-ons that I have come to depend on day-in/day-out. A decent-sized chunk of that is covered here – so maybe I’ll be using Chrome more often now.

  • z0r

    Feb 16th

    Validity

    link is broken, check it.

    Installed EyeDropper to my collection.

  • DD

    Feb 16th

    Two extensions – Measure It, and Validity – indicate on the install that they will allow access to my browsing history and private webstie data.

    I will NOT be using any of these extensions if I have to give up this privacy!

  • Steven Snell

    Feb 16th

    z0r,
    Thanks for pointing that out. I fixed the link for Validity.

  • The HD Blog

    Feb 16th

    Awesome. Thank you

  • Mary Jo Zilveti

    Feb 16th

    Greatest hints, thanks a lot.
    Mary Jo Zilveti

  • Oliver Cardiff

    Feb 17th

    Great collection of extensions. A lot of these look like they will be very useful for me, especially the SEO ones. I will definitely have to try them out and see how they compare to the Firefox extensions. Thanks for sharing.

  • Zac

    Feb 17th

    Excellent. Thank you.

  • tot2ivn

    Feb 17th

    Great collection dude !

  • wien

    Feb 18th

    nice post, very helpful, thanks

  • Rishi Luchun

    Feb 19th

    Thanks for these, loving chrome for browsing at the moment, prob love it even more if i can use it for developing :)

  • Helen K.

    Feb 26th

    I think you’d like this one fresh-released extension for Chrome (SeoQuake 0.7.7 release from 02.24): https://chrome.google.com/extensions/detail/akdgnmcogleenhbclghghlkkdndkjdjc

  • Vowani

    May 2nd

    “Link Icon” is another very useful extension. It displays an icon next to your cursor when hovering a link, indicating the type of linktarget. The extension supports various indicators.

    https://chrome.google.com/extensions/detail/cnjfiolbpeihgijepincpfjhigekegab

    Currently (May 2010), the extension supports the indicators below:
    * Windows: Link will open a new window/tab
    * Protocols: ftp://, mailto:, irc://, aim://, file://, magnet:
    * Scripts: javascript: links, onclick attribute
    * Hosts: Link to Gmail
    * File types: Applications, Music, Word Documents, Images, Java Applets & files, Javascript, PDF, Presentations, Registry files, Torrents, Text files, Spreadsheets, Google Chrome Extensions, Archives, User scripts, Videos (including Quicktime, Real)
    * Security: Going to a secured webpage, Leaving a secured webpage
    * External: Leaving the website (has some limitations)

  • LV

    Aug 8th

    You made my day.. Awesome List.. I have been using extension only in Firefox. By the lunch of Extension for Chrome is making my surfing even better.

  • Rhonda

    Oct 18th

    I also use MeasureIt. It’s a great tool.

  • Place For Bloggers

    Oct 26th

    I’ll add WordPress stats for chrome at https://chrome.google.com/extensions/detail/kfkplpbeijhlpnlccijpjpggabgmbopg

    A real time saver :)

  • Pit

    Feb 12th

    A nice colorPicker / eye dropper / DOM manipulation tool as Google Chrome extension:
    https://chrome.google.com/extensions/detail/jegimleidpfmpepbfajjlielaheedkdo?hl=en

    Cheers,
    Pit

  • smtech

    Feb 21st

    New website for Chrome Extensions Developers !!
    http://www.ginyas.com

    The Service we give:
    - we give developers few lines of code to add to their chrome extensions and by that to start making money from affiliate coupons commissions.

    - like AdSense only for Chrome Extensions!

    - our users will be able to see full reports on how many active users they have and how much money they make every day.

    - We give each new customer 15$ to his account upon registration.

  • aashish ola

    Mar 3rd

    “Adblock Plus” is now available for Google Chrome and can be downloaded from https://chrome.google.com/extensions/detail/cfhdojbkjhnklbpkdaibdccddilifddb

  • Avtopark

    Mar 12th

    Thank you for the great list

  • Sergey

    Mar 22nd

    See also:

    PHP Console – Display PHP errors/debugs in Google Chrome console or by notification popups:
    https://chrome.google.com/extensions/detail/nfhmhhlpfleoednkpnnnkolmclajemef

    JavaScript Errors Notifier – Notify about JavaScript errors by icon in address bar:
    https://chrome.google.com/extensions/detail/jafmfknfnkoekkdocjiaipcnmkklaajd

  • Joe

    Apr 12th

    WebRank SEO provides Google Pagerank, Alexa, Compete and Quantcast Rank, pages indexed and backlinks in Google, Bing and Yahoo. It also provides whois information and traffic graphs for the domain.
    https://chrome.google.com/webstore/detail/mkhilblbmkdnapffblmecglknalglfji

  • Powerserve

    May 15th

    Thanks for the excellent list.

    Man I wish they made the full Firebug extension for Chrome. Chrome has replaced Firefox on my machine, except for instances when I need to use Firebug. It’s the only thing beyond browser testing that keeps me from being 100% Chrome.

  • Leave a Comment

    Your email address will not be published. Required fields are marked *