15 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) 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
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.
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.
AlloW
September 20th, 2010
A great App for Chrome:
http://www.chromeextensions.org/other/virual-piano-keyboard/
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
Abraham Williams
October 24th, 2010
Missed Speed Tracer: https://chrome.google.com/extensions/detail/ognampngfcbddbfemdapefohjiobgbdl
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