15 Google Chrome Extensions for People Who Build Websites

10 Google Chrome Extensions for People Who Build Websites

Google Chrome is a wonderful web browser of choice for web designers and web developers. With Google Chrome extensions, you can add more features to the browser to help you with designing, debugging, and working on websites. We share with you the top ten Chrome extensions for designers and developers.

1. Firebug Lite (for Google Chrome)

Firebug Lite (for Google Chrome)

Firebug Lite (for Google Chrome) is an extension that sets up Firebug Lite in the browser. Although the built-in Developer Tools in Chrome gives you relatively the same features of Firebug (and more), long-time Firebug fans will appreciate this extension for debugging and testing their work in Chrome.

2. Web Developer

Web Developer

Chris Pederick’s Web Developer toolbar is a long-time favorite among web designers and front-end developers. Originally created for Firefox, it has been ported to Chrome with a slicker interface.

It has loads of options for examining and understanding web page layouts, including showing block element stacking orders, displaying CSS style information about certain elements, browser cache controlling, and much more. To learn some Web Developer toolbar tips and tricks, see the following posts:

3. Resolution Test

Resolution Test

Resolution Test is an extension for testing web pages in different screen resolutions, with an option to define your own custom resolutions. This is very handy in making sure that your web design looks great under different monitor sizes.

4. Pendule


Pendule extends the built-in Developer tools in Google Chrome. The extension gives its users plenty of features such as one-touch markup validation using W3C’s automated web services, hiding images on a web page, viewing scripts included in a web page, and more.

5. PlainClothes


One of the best ways to evaluate the accessibility of a web page is to remove its CSS styles and see if content being presented is still readable without them. This simulates the experience of a user who cannot see their monitor screen and have to rely on the web page’s markup to access the content. PlainClothes does one thing well; it removes all CSS styles on a web page.

Though created primarily for web development testing, you can use this extension to view your favorite styles unstyled (so that the boss doesn’t catch you browsing Digg when you should really be finishing up that JavaScript function).

6. Image Cropper

Image Cropper

If you want to take certain portions of a web page, Image Cropper is the simple, no-frills Chrome extension for you. Just drag around the area you want cropped, and it’ll take just that part of the web page. Need pixel-perfect accuracy? It displays the dimension and location of your crops to help you get just the size you need.

7. Lorem Ipsum Generator

Image Cropper

This extension prides itself in being minimalist and simple—and that’s good because there’s no reason generating Lorem Ipsum text should be a convoluted affair. Lorem Ipsum generator helps you fill up your design mockups with dummy text for presentation purposes.

8. IE Tab (for Windows)

IE Tab (for Windows)

Troubleshooting in Internet Explorer’s proprietary Trident layout engine is not a fun ordeal. With IE Tab, you can at least save some time from having to use Internet Explorer (and its limited list of extensions) for debugging rendering issues in your work.

9. jQuery Shell

jQuery Shell

jQuery Shell allows you to run JavaScript and jQuery commands in the context of the current web page. It’s a great extension for learning and experimenting with jQuery.

10. Color Picker

Color Picker

This one-trick Chrome extension does one thing really well: quickly getting the Hex and RGB values of any color on any web page. It can be very helpful in determining what colors your favorite website uses without having to take a screen grab of it into Photoshop and using the Eyedropper tool.

11. WebEdit


With the WebEdit Chrome extension, you can make any web page editable (the changes you make, of course, will not be saved). Why would this extension be helpful? If you are creating a website and want to play around with elements without making any significant changes to the code, this extension can come in very handy.

12. Chrome Sniffer

Chrome Sniffer

Have you ever wondered what technologies, frameworks, and open source apps a website is using? Experienced web developers can find this out by studying the site’s source code, but if you want a more convenient and quick way of doing this, then check out Chrome Sniffer. Chrome Sniffer lists all known JavaScript framework/libraries (jQuery, MooTools, etc.) and CMS (Drupal, WordPress, etc.) that a website uses.

13. Webpage Screenshot

Webpage Screenshot

A common task for web designers is taking screen grabs of web pages. With Webpage Screenshot, you can capture an entire web page, even if it spills outside of the browser’s viewport. It gives users the opportunity to resize the window before capturing and saves the screen grab as a PNG file.

14. Eye Dropper

Eye Dropper

Eye Dropper is a Google Chrome extension that gives you the ability to determine a color on any web page. What’s more is that it presents a color wheel and color swatches (found in most graphics software) so that you can experiment, tweak and pick colors.

15. SEO Site Tools

SEO Site Tools

A well-formed web page with great markup ultimately leads to awesome search engine results. However, if you would like to evaluate your website in terms of known search engine optimization factures, try out the SEO Site Tools, a Chrome extension that gives you a plethora of useful tools and features for evaluating SEO. It can pull tons of on-page and off-page metrics, social media information, and more.


Do you use Chrome for building websites? Why or why not?

Related Content

About the Author

Kawsar Ali is a web designer, graphic designer, and photographer based in NY, U.S. He’s also the founder of Desizntech, a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter and check out his Personal Website.

This was published on Apr 24, 2010


Luigi Apr 24 2010

Very nice, that seo extension looks very promising! Tnx for sharing.

Juegos Apr 24 2010

Super, all are very good, I use some of them but never heard about Chrome Sniffer, Image Cropper and WebEdit. Thank You

Rory Dixon Apr 24 2010

This is a great collection! I have to admit that Chrome isn’t a browser that I’ve paid too much attention to but, with people using more and more Google aps, it’s probably only a matter of time before it has the comparable uptake to IE and FF.

Stephen Apr 24 2010

No, it’s still better to use Firefox to create websites. If I were to install all 15 of your recommended extensions (which I had already installed similar plugins on Firefox), I would get 15 buttons on my top right corner, in addition to my other chrome extensions.

It would be a pretty messy browser for everyday use!

skyje Apr 24 2010

please update IE Tab link not working

ken shan Apr 24 2010

very useful article. I’m a FF fan because they got heaps extension for web development… but still would like to try the new Google Chrome…specially Chrome Sniffer and Webpage Screenshot.

Michael Apr 24 2010

i do not use chrome yet, but i am thinking of using it just because of speedtracer:

Jacob Gube Apr 24 2010

@Juegos: Glad Kawsar’s post helped you discover some new Chrome extensions.

@Rory Dixon: I use both Chrome and Firefox. I have both of them open right now! If you haven’t tried it out, it takes 5 minutes to download and install.

@Stephen: I can see what you mean–having too many Chrome extensions sort of affects its minimalist UI. I personally wouldn’t install all 15 though–just the ones that I’d use on a regular basis (the rest, you can disable while you’re not using them).

@skyje: Thanks for the heads-up. The link should be fixed now.

@Michael: Yeah, it’s an awesome extension. I wrote about it on this post from last week.

Smashing Share Apr 24 2010

Nice roundup Kawwsar. Am still using Firefox. I don’t know when I will shift to Chrome but bookmarked this one for future reference

Chris McCorkle Apr 24 2010

I like them both. There shouldn’t be an argument of Firefox vs. Chrome; we should be enjoying the incremental victories over Internet Explorer, Trident, and blatant non-compliance.

Thanks 6r for the post — I’m going to check out “Web Developer.”

Jesse Apr 24 2010

This is a nice round up. I have been waiting to move to chrome for a longtime now. If these all pass the test I think I might just be able to make the move.

greven Apr 24 2010

Great post mate. Thanks for sharing.

DaveKingsnorth Apr 24 2010

This post just convinced me to make the switch from firefox to chrome for developing as well as browsing, thanks a lot

Freddy Apr 24 2010

Thanks for sharing Kawsar. I hadn’t switched over to Chrome because they lacked the Web Developer toolbar. I’m giving it a shot now.

douglas puncheon Apr 25 2010


If you’re creating websites, I assume you won’t be doing it on a netbook or ipad. A designer’s monitor can accommodate a few icons.

The best thing about chrome is you can have these extensions without any impact on browser performance – which isn’t something you can say about the ailing Firefox.

Erkan Apr 25 2010

That’s what I was looking for thanks a lot.

exinco Apr 25 2010

nice extension but so far i was satisfied with firefox. second choices was G Chrome.

P5ycH0 Apr 25 2010

No, I don’t use chrome. It’s a privacy horror browser. All the data–trails that you build by browsing the web is used(&stored) by Google.
Are these plugins also working on the other (Non-Google) build chrome browsers?

This is great, thanks! I didn’t even know chrome has support for extensions.

Charmaine Apr 25 2010

Well! it looks like there are more then what I knew all along.

Peach Apr 25 2010

Nice list. The SEO tool are very powerful. Thanks a lot for sharing.

Big Al Apr 25 2010

The problem with Firebug Lite is you can’t edit pages.

I was really hoping to be able to edit pages like I can with FF, but unfortunately I can’t with this chrome version. Sucks!

Megan Apr 25 2010

While I don’t use Chrome (FF for me), I can’t deny the potential it has. These are some awesome extensions when it comes to getting the job done.

jjasdl Apr 25 2010

alert(“yes, I agree.”);

Young Apr 25 2010

The Sniffer sounds awesome. Is there anything like that for FF?

Ashfame Apr 26 2010

Now if anyone can report the response of Chrome when all these are installed is better than what it was for Firefox, that would be great.

Nikos Apr 26 2010

There is also a very interesting page speed optimization extension named Speed Tracer. Very deep browser info regarding page rendering. Have a look here:

nice extension but so far i was satisfied with firefox. second choices was G Chrome.

PureDezigner Apr 26 2010

This is great info Kawsar and will actually prompt me to give chrome another shot. Firefox has become very bloated and pretty much a system hog over the years, or maybe this is because of the addons.

I wonder if chrome will have these issues while running multiple extensions also.

Brroke Apr 26 2010

Nice, I still prefer the firebug implementation in firefox the best. IE8’s developer tools are and improvment over IE7 but man it sucks compared to firebug. checking script errors in firefox is also better.

Haley Apr 26 2010

nah – granted, there are a couple of bad eggs out there, but they’re easy to pick out; just use the task manager and check on them if your browser seems to be going slower. One of the notifier extensions I’d installed awhile back was routinely eating up 1GB+ of memory :p

Haley Apr 26 2010

I use Chrome all the time, but its developer tools just don’t make sense to me, so I use firebug.

Nicole Apr 26 2010

As a developer, I need Chrome to have the full build of firebug with extensions. When that happens, then I will switch browsers.

Sean O Apr 26 2010

See also the jQuery API Search plugin:

…written to be the fastest way to lookup jQuery methods.

Jordan Walker Apr 26 2010

Finally…firebug and web developer tools for Chrome. Great news!

Kendall Apr 26 2010

Chrome just released their first beta 2 years ago and already crushing the competition! I’ve always been a die hard FF fan but that is slowly starting to change.

Leandro Apr 26 2010

it help me a lot now! :)

Advance Web Apr 26 2010

Wow. Thanks for posting this collection. I am a web designer and honestly, I don’t have these extensions, really. LOL. Thanks for suggesting these. I will definitely try these out.

Wow, the Web Developer has a different interface from its version in Firefox. It looks good.

The Pendule seems to be cool, too. It has many features that maybe helpful to me.

Thank you very much for sharing.

Cesar Noel Apr 26 2010

Thanks for sharing this one, I have been waiting for these extensions for so long. No I can leave Firefox for now.

As a developer, I need Chrome to have the full build of firebug with extensions. When that happens, then I will switch browsers.

Sopping Cart Apr 27 2010

Supper man. I always love to do work on Chrome as a developer.

Simon Apr 27 2010

As a developer, I need Chrome to have the full build of firebug with extensions. When that happens, then I will switch browsers.

pracas upreti Apr 28 2010

im still a firefox fan , i had downloaded and installed chrome in the first day of its release , but i missed lots of addons which i had used in firefox , normally like, firebug, and all other good addons ,

but later on i found the same addons supporting chrome , i again installed it , finally i was glad to see the post about the best addons , thanks Kawsar

simon Apr 28 2010

hey man you are missing the goatse doodle chrome extension! lol! [Editor: link removed]

Bryan Apr 28 2010

Try out the Chrome Editor project I’m working on. It is still in development.

Cre8ive Commando Apr 29 2010

I’m still developing in Firefox but thinking to move over to Chrome. These extensions will definitely help. :-)

PeEll May 04 2010

#5 is definitely something I was looking for last week. I didn’t know it existed so I ended up writing my own:

Chrome User May 04 2010

Not sure if this was already listed in the other 50-100 comments but there is an official release from the firebug team that is in beta that is better than the one you have listed (in fact if you look at first developers page he makes a note of it)
I just found this out – Hope it helps:

Mike Key May 05 2010

The Sniffer is pretty awesome. I have been to so many sites and wondered what platform they may be using, especially when looking at blogs or online stores.

Sweet find.

Arnaud May 09 2010

For PHP developper, this is the best extension :

Techwatch May 14 2010

Resolution Test is a very helpful little tool, so many developers seem to make sites to fit their preferred screen res

Skatox May 25 2010

This post helped me to find similar extensions for Firefox XD

Andrey Jul 22 2010

“jQuerify” — Perfect extension to embed jQuery into Chrome Console as simple as you can imagine. This extension also indocates if jQuery has been already embeded into page.

This extension used to embed jQuery into any page you want. It allows to use jQuery in the console shell (You can invoke Chrome console by “Ctrl+Shift+j”).

To embed jQuery into selected tab click on extention button.

LINK to extension:

Ernest Morse Aug 06 2010

Yet another great list! I really like the SEO Site Tools and Resolution Test. Once again, thanks for putting these lists together. It really has saved me some time.

Yoni Seforim Aug 22 2010

Simply thanks on the great extensions.

karen Oct 17 2010

Has anyone heard of the GatherBack chrome extension ( just tried out this screenshot extension for chrome and it looks pretty snazzy… would be happy to hear if anyone has had any good or bad experiences with them.

ElbertF Oct 24 2010

Chrome Sniffer alternative for Firefox:

Nice list but I feel Awesome Screenshot does a better job at taking screenshots and annotating them.

Jaime Oct 24 2010

The Awsome Screenshot extension replaces both screenshot extensions for the browser you have here.

Paradise Oct 24 2010

excellent article. i use several of them already, like SEO, which i think its ok, and downloaded a few to try.

Usable Bytes Oct 25 2010

All fine; but Firebug Lite? Why? Chrome’s own Developer Tools – which comes bundled – is much more powerful!!

Mike Meiers Oct 25 2010

You missed the iMacros for Chrome extension. A fantastic tool for web performance (“STOPWATCH command”) and web regression testing. You can record and replay a sequence, e. g. form filling or going through a checkout process:

Danny Englander Oct 25 2010

I recently switched to Chrome as my web dev tool with many of the extensions mentioned above as FireFox seemed slow and bloated on my aging iMac Core 2 Duo. I missed FireFox as a development tool though still. One of the main features missing in Chrome is that you cannot right click to view a background image like you can in FireFox. Also 1Password’s implementation in Chrome was still sub standard to that in FireFox.

However, I recently got a Mac Pro Quad Core Xeon and find that FireFox now can run all my required development extensions without seeming like bloatware. It is very fast so for now, I have switched back to FireFox, I just really missed it.

Randy Pickard Oct 30 2010

Great roundup of extensions. Very helpful. But like other commenters in the thread, I am deeply torn by my privacy concerns over using Chrome versus the benefits of the utility. Of course the good news is that I don’t have to use just one browser, and actually am probably better off getting a feel for the user experience with both Chrome and Firefox

Blanke Nov 09 2010

Hello, I would suggest an extension that is not here, the unProtector.

This extension aims to remove those pages that link protective bother us when we download from certain sites.

Enjoy = D

Jason Nov 10 2010

Chrome is my go to everyday browser. But cannot beat Firefox for development. Firebug is too good. Other must have ext: Firebug+FirePHP+jQuerify+YSlow, FoxProxy, HttpFox, Web Developer.

Sachin Gupta Nov 16 2010

Nice list! Thanks for sharing Chrome extensions listing, it’s very helpful for web designer, developer & SEO. I looking for these extension for safari too. Any one know about safari extension.

PhilD Dec 01 2010

I’d love to see ‘Pixel Perfect’ – firefox/firebug extension converted to chrome

Robert Chen Dec 20 2010

So I tried subscribing to your RSS Feed, and it gave me a “404” error… Can you tell me if it’s me or you?

kataskeyh istoselidwn Jan 28 2011

Useful article, thanks!

A nice colorPicker / eye dropper / DOM manipaulation extension:

Sergey Mar 22 2011

PHP Console – Display PHP errors/debugs in Google Chrome console or by notification popups:

JavaScrip Errors Notifier – Notify about JavaScript errors by icon in address bar:

You forgot about WebRank SEO
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.

memurlar May 17 2011

very usefull article for using chrome effectly. thanks a lot

Mateus Jun 09 2011

Thanks. Nice tools!

cute girl Jul 11 2011

This is really useful as I stopped using Chrome because it didn’t have the dev tools I could get from Firefox

Georgia Lousteau Sep 04 2011

I know this is an old post and you probably wont read this comment, but this one just caught my eye because it is just creepy how much we are alike. How in the world can we like all the same things?

Chromer Sep 08 2011

You could also check out MediaPlus for Chrome. MediaPlus lets you move, resize, download, magnify and do more with media content like flash movies, images, games, HTML5 videos, etc.
Available at
More info –

Saikrishna Nov 09 2011

Using Chrome Sniffer and SEO Tools :) Thanks for sharing

Linda Oct 09 2012

Have to say firebug so deserves the number one spot, that little critter has saved me hours of debugging in the past!

This comment section is closed. Please contact us if you have important new information about this post.