9 Useful Google Chrome Extensions for Web Designers

By / Jan 25, 2011 / Tools
shares

Compared to the other major web browsers, Google Chrome is still relatively new. However, it’s popularity continues to grow rapidly. Here on WDL, Chrome is the second most used browser by our readers, right behind Firefox. With that in mind, and considering that most of you are web designers or in a related field, we thought it would be a good idea to show you some extensions for Chrome that you might find useful.

Web Developer

chrome extensions

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox written by the same person.

BuiltWith

chrome extensions

BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.

Eye Dropper

chrome extensions

Eye Dropper is extension for Google Chrome and Chromium. It allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers.

MeasureIt!

chrome extensions

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

Window Resizer

chrome extensions

This extension resizes the browser’s window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.

csscan

chrome extensions

Inspired by the Firefox Extension CSSViewer, this Chrome extension allows you to easily scan an element’s basic CSS properties without having to delve into the inspector window.

MultiSwitch

chrome extensions

Whenever you have the need to simply switch between development, test and productive hosts you should use MultiSwitch.

Speed Tracer

chrome extensions

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.

Awesome Screenshot

chrome extensions

Awesome Screenshot lets you capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click upload to share. Support PNG and shortcuts.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

19 Comments

  1. Kevin
    January 25, 2011

    Some really useful extensions there. I really like the Measureit! that will come in useful =)

    Reply
    • Angelee
      January 25, 2011

      was comment the same.. the Eye Dropper seems useful as well!

      Reply
      • Lakeside Techies
        February 25, 2011

        The eye dropper, speed tracer and window resizer are new ones for me. Installed.

        ;)

        Reply
  2. DTX Studios
    January 25, 2011

    Much useful post. Worth sharing.

    Reply
  3. Mohammad Elsheimy
    January 25, 2011

    Great list, thank you very much. I need to add also:
    - Firebug
    - Rulers, Guides, Eye Dropper and Color Picker

    Reply
  4. Gerardo Ruiz
    January 25, 2011

    Great post, I cant wait to test the developer tool for Chrome, also the Builtwith and the cssscan definitely will make my life easier.

    Reply
  5. Peter
    January 25, 2011

    My fav color picker isn’t a browser add-on. It’s called pixie and is freakin’ awesome.

    Reply
  6. John McDuffie
    January 25, 2011

    I use every one on these addons except BuiltWith and they do make my life so much easier.

    Reply
  7. jon
    January 25, 2011

    Excellent extensions! These will come in handy, thanks for sharing.

    Reply
  8. Sean
    January 25, 2011

    There is a color picker and a ruler in Web Developer. Is there any particular reason to install these separate components?

    Reply
  9. NAvin
    January 25, 2011

    I use Speed Tracer for my chrome. its a best extension so far with very good scripting.

    Reply
  10. Mike Wilton
    January 25, 2011

    I used to use MeasureIt in Firefox and used it religiously. I had no idea it had come to Chrome, so when I needed it I would still have to open a separate Firefox window to get what I needed. I’m really glad you shared that one.

    I also was unaware of Eye Dropper. I have relied on Quick HTML Color Picker for ages, so I’ll have to check it out. Thanks for sharing.

    Reply
  11. Pen Hunt
    January 25, 2011

    Fantastic array of tools that I never knew existed on Chrome – love the eydropper, measure it and web developer – many thanks for sharing :)

    Reply
  12. raybak
    January 26, 2011

    I switched to chrome recently from FF, now chrome is my defualt browser and I am going to install few of tehse extensions..

    Reply
  13. Jason
    January 26, 2011

    I haven’t seen most of these extensions before – so thanks for the heads up on these. Chrome is quickly becoming the must have browser of choice, although i still prefer Firefox out of habit.

    Reply
  14. Tim
    January 29, 2011

    I would say to add Pendule to this list.

    Reply
  15. Chris
    February 4, 2011

    This is a great collection of resources, but I had some trouble with Speed Tracer and the newest version of Chrome, (9). Has anyone else had this problem?

    Reply
  16. Fredrik
    February 8, 2011

    hay thx for the resize addonet:))

    Reply
  17. Runab
    May 17, 2012

    This chrome extension for making Google Reader readable is pretty awesome – https://chrome.google.com/webstore/detail/fdnglondfcmoiakaolanlglfchdhkdgc

    Reply

Leave a Reply