15 Google Chrome Extensions for People Who Build Websites
Become a Facebook Fan of Six Revisions.
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) 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
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:
- Awesome Things That Web Developer Extension Can Do
- Ways to Enhance your Web Development Using the Web Developer Extension
3. 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
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
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)
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 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
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
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
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 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
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
- 10 Web Browsers You Probably Haven’t Heard Of
- Performance Comparison of Major Web Browsers
- Top 6 Internet Explorer Extensions for Web Developers
- Related categories: Tools and Web Design
About the Author
on Amazon.com. Read more 
56 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.
Arnaud
May 9th, 2010
For PHP developper, this is the best extension :
https://chrome.google.com/extensions/detail/kfiahljocaflpaiopilgpiochncgdnhd
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.
Leave a Comment