15 Google Chrome Extensions for People Who Build Websites

Apr 24 2010 by Kawsar Ali | 83 Comments

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

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

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

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.

83 Comments

Luigi

April 24th, 2010

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

Juegos

April 24th, 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

April 24th, 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

April 24th, 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

April 24th, 2010

please update IE Tab link not working

ken shan

April 24th, 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

April 24th, 2010

i do not use chrome yet, but i am thinking of using it just because of speedtracer:
https://chrome.google.com/extensions/detail/ognampngfcbddbfemdapefohjiobgbdl

Jacob Gube

April 24th, 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

April 24th, 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

April 24th, 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

April 24th, 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

April 24th, 2010

Great post mate. Thanks for sharing.

DaveKingsnorth

April 24th, 2010

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

Freddy

April 24th, 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

April 25th, 2010

@stephen

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

April 25th, 2010

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

exinco

April 25th, 2010

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

P5ycH0

April 25th, 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?

FY

April 25th, 2010

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

Charmaine

April 25th, 2010

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

Peach

April 25th, 2010

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

Big Al

April 25th, 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

April 25th, 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

April 25th, 2010

alert(“yes, I agree.”);

Young

April 25th, 2010

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

Ashfame

April 26th, 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

April 26th, 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: http://code.google.com/webtoolkit/speedtracer/

Ian

April 26th, 2010

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

PureDezigner

April 26th, 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

April 26th, 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

April 26th, 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

April 26th, 2010

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

Nicole

April 26th, 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

April 26th, 2010

See also the jQuery API Search plugin:
http://sean-o.com/jquery-api

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

Jordan Walker

April 26th, 2010

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

Kendall

April 26th, 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

April 26th, 2010

amazing!
it help me a lot now! :)

Advance Web

April 26th, 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.

DBT

April 26th, 2010

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

April 26th, 2010

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

Sean

April 26th, 2010

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

April 27th, 2010

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

Simon

April 27th, 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

April 28th, 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

April 28th, 2010

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

Bryan

April 28th, 2010

Try out the Chrome Editor project I’m working on. It is still in development. https://chrome.google.com/extensions/detail/nglgdmkkiemejlladcdjegcllaieegoe?hl=en-US

Cre8ive Commando

April 29th, 2010

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

PeEll

May 4th, 2010

#5 is definitely something I was looking for last week. I didn’t know it existed so I ended up writing my own: http://github.com/PeEllAvaj/CSS-Destyler

Chrome User

May 4th, 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:

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

Mike Key

May 5th, 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.

Techwatch

May 14th, 2010

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

Skatox

May 25th, 2010

This post helped me to find similar extensions for Firefox XD

Andrey

July 22nd, 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: https://chrome.google.com/extensions/detail/gbmifchmngifmadobkcpijhhldeeelkc

Ernest Morse

August 6th, 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

August 22nd, 2010

Simply thanks on the great extensions.

karen

October 17th, 2010

Has anyone heard of the GatherBack chrome extension (http://www.gatherback.com)? 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

October 24th, 2010

Chrome Sniffer alternative for Firefox: http://wappalyzer.com

Sri

October 24th, 2010

Nice list but I feel Awesome Screenshot does a better job at taking screenshots and annotating them.
https://chrome.google.com/extensions/detail/alelhddbbhepgpmgidjdcjakblofbmce

Jaime

October 24th, 2010

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

Paradise

October 24th, 2010

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

Usable Bytes

October 25th, 2010

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

Mike Meiers

October 25th, 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:
https://chrome.google.com/extensions/detail/deckhobdafgddaglbaokimbcjjdikago

Danny Englander

October 25th, 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

October 30th, 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

November 9th, 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.

http://www.unprotector.com

Enjoy = D

Jason

November 10th, 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

November 16th, 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

December 1st, 2010

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

Robert Chen

December 20th, 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

January 28th, 2011

Useful article, thanks!

pit

February 12th, 2011

A nice colorPicker / eye dropper / DOM manipaulation extension:
https://chrome.google.com/extensions/detail/jegimleidpfmpepbfajjlielaheedkdo?hl=en

Sergey

March 22nd, 2011

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

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

Sam

April 12th, 2011

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.
https://chrome.google.com/webstore/detail/mkhilblbmkdnapffblmecglknalglfji

memurlar

May 17th, 2011

very usefull article for using chrome effectly. thanks a lot

Mateus

June 9th, 2011

Thanks. Nice tools!

cute girl

July 11th, 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

September 4th, 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

September 8th, 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 https://chrome.google.com/webstore/detail/emaamodndfmmmcjepfigalbjjjemadom
More info – http://nparashuram.com/projects/flashresizer.html

Saikrishna

November 9th, 2011

Using Chrome Sniffer and SEO Tools :) Thanks for sharing

Linda

October 9th, 2012

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

Leave a Comment

Subscribe to the comments on this article.