Top Chrome Extensions For Web Development Web Design

By Chad McComsey, aka TheChad Measure

Recently I made the switch to Google’s Chrome Web Browser. I have been hearing a lot of talk about how it is an uber fast browser and generally faster than Firefox and Internet Explorer. Of course the real test was against Safari 5 which sources say was pretty much a toss-up, not the proverbial beating that Apple claims it to be. After installation of Chrome I immediately was looking for my toolbars and extensions from Firefox. Chrome imports your bookmarks and other sections but doesn’t bring over your add-ons. I’m not sure why I expected the add-ons to be there but when I couldn’t even find an area for toolbars I started to search the Chrome site for extensions. I love extensions in my browser, especially when they help the general functionality and increased production of building websites. There are 5 specific add-ons that I always used on Firefox and once I found them in the Chrome extensions a sigh of relief filled the air. So what are these Top Chrome Extensions? Read on to find out!

1. Web Developer by Chris Pederick

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. This is my number one because I do use it the most. I primarily use it for it’s excellent CSS options and displaying element information.
Screenshot - Web Developer Extension

2. Firebug Lite for Google Chrome by pedrosimonetti

Firebug Lite is a tool to be used in conjunction with Developer Tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties.
Screenshot - Firebug Lite

3. MeasureIt! by nirzoref

MeasureIt! draws a ruler-line that will help you get the pixel width and height of any elements on a webpage. I use this one a lot when tweaking my CSS. Sometimes it’s a matter of only a few pixels. MeasureIt helps me get a precise pixel count so I have to edit my CSS less.
Screenshot - MeasureIt!

4. Eye Dropper by kepicz

Eye Dropper and Color Picker extension which allows you to pick color from any Screenshot - Eye Dropperwebpage or from the advanced color picker. This extension aids with the comping process. Eye Dropper can pick out specific hex and number codes in order to get the most accurate color. It’s also great for redesigns to get all the correct colors from a previous site.

5. Window Resizer by Ionut Botizan

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. The resolutions list is completely customizable as well.
Screenshot - Window Resizer

There you have it! My Top 5 Chrome Extensions for Web Developers and Web Designers. I’d also like to add the Lorem Ipsum Generator by niko.pufal as a very close sixth place for the Top Chrome Extensions. I enjoy this one because I never seem to have my Lorem Ipsum page at hand and now all I need to do is click the extension and a full page of Lorem Ipsum can be displayed for you to copy and use. It’s a nice little tool and beats the hell out of having to type “Lorem ipsum sip dolar” etc. over and over again!

View Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Are You Ready To Do More with Mind?

Click the link below to get started!

Work With Mind