15 Useful Google Chrome Extensions for Web Designers and Developers
Posted January 4, 2011 in Tools/Resources, Web Design
I have only recently made the switch to using Google Chrome as my default browser, and at the same time I began using it for working on my freelance web design and development projects. Although I still find myself wandering back to Firefox every now and then because of my dependency on the Firebug extension that Chrome has yet to completely duplicate, I am thoroughly satisfied with the Chrome browser’s speed, use of screen space, and more.
In this post, I will share with you some of the best Chrome extensions I have found useful when designing and developing websites, listed in alphabetical order.
1. Aviary Screen Capture
Aviary Screen Capture lets you take a screen shot of any web page. Use the Aviary.com applications after you’ve gotten your screen shot to edit that shot from within your browser. The basic image editor lets you mark up (by drawing arrows and rectangles), edit (crop, rotate and resize) and get the exact pixel colors of the image.
Features include:
- Save to desktop, host online, or edit in other Aviary apps
- Captures instantly
- Screen capture of the visible portion of all web pages and images
- Capture entire web pages
- Add visual notes like arrows, text and highlights to your capture
- Crop your capture
- Resize, rotate and flip your capture
- Smart select and move of captured elements
- Grab color information from the page
- Quick launch six Aviary design tools including image editor, markup editor, vector editor, color palette editor, effects editor & audio editor
2. Chrome SEO
Chrome SEO provides easy access to search engine optimization tools. These tools help you with daily SEO tasks like competitive analysis, keyword research, backlink checks, page rank checks.
3. Chrome Sniffer
Chrome Sniffer allows web developers to inspect web framework / CMS and JavaScript library running on a website. The extension displays an icon indicating the detected frameworks. Currently, this extension detects up to 70 popular CMS and JavaScript libraries.
4. Eye Dropper
Eye Dropper allows you to pick color from any web page or from an advanced color picker.
5. Firebug Lite for Google Chrome
Firebug Lite for Google Chrome is not a substitute for Firebug (unfortunately), or for Chrome Developer Tools. Instead, you should use this tool with these other tools. Firebug Lite provides the rich visual representation similar to that of Firebug with HTML elements, DOM elements, and Box Model shading. Firebug Lite also provides some cool features such as inspecting HTML elements with your mouse, and live editing CSS properties.
6. IE Tab
The IE Tab is available through Internet Explorer and lets you display web pages in a Chrome tab. This extension is great for web developers who want to cross browser test with the IE rendering engine. (This is a Windows only extension.)
7. Instant Image Editor
Instant Image Editor lets you right-click any image or element on a web page with a background image while holding down the alt key (ctrl key on Linux). You can edit the image instantly in a new tab using Pixlr, which is a fast, easy-to-use app that runs in the browser. When right-clicking an element that is not an image, Instant Image Editor will also try to determine whether the element has a background image that is editable.
8. Lorem Ipsum Generator
The Lorem Ipsum Generator generates random “Lorem Ipsum” text using a minimalist and attractive design.
9. MeasureIt!
MeasureIt! lets you use a ruler to get the pixel width and height of any elements on a web page.
10. Pendule
Pendule provides extended web developer tools for Chrome. Use this extension with the built-in developer tools, which include view, reload and disable CSS, view JavaScript, forms editing, view, hide and get information about images, color picker, ruler, topographic view, markup validators and more!
11. PHP Console
PHP Console is an extension for Lagger (lightweight and flexible open-source PHP library for errors/exceptions/debugs handling in PHP) that displays PHP errors/debug messages in Google Chrome console and in notification popups.
12. Speed Tracer
Speed Tracer helps you to find and fix performance problems in your web applications. This extension visualizes metrics taken from low-level instrumentation points inside of the browser and analyzes them while your application runs.
This application helps you understand where time is being spent in your application. This includes problems caused by:
- Javascript parsing and execution
- Layout
- CSS style recalculation and selector matching
- DOM Event handling
- Network resource loading
- Timer fires
- XMLHttpRequest callbacks
- Painting
- and more …
13. Web Developer
Web Developer 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.
14. Webpage Screenshot
Webpage Screenshot is a fast and simple extension to capture the whole web page. Even long pages are saved in one image file. This extension lets you save PNG/JPG image of any web page with just one click.
Features include:
- Has drawing tools: line, ellipse, rectangle, arrow
- Lets you add text to your screenshots
- Fast Crop your image to desired dimensions
- Start Editing even before image is ready
- Upload and share to Facebook, Twitter, Gmail, MySpace
- Print: Image Sent directly to printer
- Save to HD: The only extension that let you save large images to your Hard Drive
- Can capture local files: Can capture “FILE://”
- Comes with Color Picker: Remembers the last color you used.
- Can capture horizontal websites as well
15. Window Resizer
Window Resizer resizes the browser’s window to emulate various resolutions. This extension is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions. The resolutions list is completely customizable (add/delete/re-order).
There are three screen types available:
- Desktop (standard; resize the entire window to the specified resolution)
- Laptop/Notebook (same as Desktop, but different icon; makes it easier to scan the resolutions list)
- Mobile (different than the previous two; this applies the specified dimensions to the viewport, not to the entire window, because mobile browsers usually have no borders)
Your Turn
Do you use any of these extensions? Do you use other extensions for your web design and/or development? Which are your favorites and which do you use most often? Please share in the comments below.
Related posts:
- Top 10 Job Websites for Open Source Web Designers and Developers
- Six Firefox 3 SEO Extensions
- 25 Tutorials for Advanced Freelance Web Designers
- 10 Essential Tools for Web Developers
- Top 6 Most Useful Color Tools For Designers
About the author: Brian is a freelance web & graphic designer with over 15 years' experience. His business bkmacdaddy designs specializes in completely custom WordPress, Joomla, Magento & CSS/XHTML websites as well as logo design, brand identity, social media management and more. Brian is a father of 3 and madly in love with his wife of many years.
The Unlimited Freelancer is Now Only $19
Unleash the true potential of your business. Get The Unlimited Freelancer and start transforming your freelance business,
now only $19.
Try searching "Getting Clients" or "Productivity"
Free Report
Sign up for our product discount list to get a free copy of Why Some Freelancers Thrive and Others Barely Survive. You can unsubscribe anytime.
Forum Discussions
- Comprare Generico ALLEGRA Online
May 16th, 2012 - 10:00 am - Comprare Generico ALLEGRA Online
May 16th, 2012 - 10:00 am - Comprare Generico ALLEGRA Online
May 16th, 2012 - 9:59 am
Popular Articles
- SEO Techniques All Top Websites Should Use
- When a Client Can't Afford You: Why It's Still Better to Bid High
- How To Stop Scrambling For Clients And Get A Steady Stream Of Paying Gigs
- A Simple Way To Stop Clients From Rejecting Your Proposals
- 3 Reasons Your Rates Are Still Low (And How To Start Raising Them)
62 Comments
Vivek Parmar
January 4th, 2011 at 8:33 amsome of them are new to me. thanks for sharing it. screen-capture and SEO are the one that i use most of them (on daily basis)
David Delmar
January 4th, 2011 at 9:13 amSick. Thanks for this. I’m on it.
Agence Web Rouen
January 4th, 2011 at 9:58 amA good extension for php developpers :
https://chrome.google.com/extensions/detail/kfiahljocaflpaiopilgpiochncgdnhd
Alexander Trefz
January 4th, 2011 at 9:59 amWhy would you ever use Firebug Lite? It is just a weak version Firebug, which itself(at least without extensions) it not as good as the build in Chrome Dev Tools.
@gabPascolat
January 4th, 2011 at 11:23 amAwesome! Thanks for share.
Mikael Röjnert
January 4th, 2011 at 12:24 pmThanks for sharing, just what I was looking for.
Ejaz Siddiqui
January 4th, 2011 at 1:17 pmBuiltWith Technology Profiler (https://chrome.google.com/extensions/detail/dapjbgnjinbpoindlpdmhochffioedbn) is a great extension through which we can better know about the website which may help us to start our projects.
Orange County SEO
January 4th, 2011 at 3:57 pmI love Chrome, first because of its relative lightning speed, Second, the extensions make it my daily choice for nearly everything. The Chrome SEO extension gives me really quick intelligence on any site in seconds flat. Another extension I like is SEO Site tools, similar to Chrome SEO but with a few extra handy tools like a suggestions module that tallys up common SEO related issues like excessive links or keywords, etc.
TheAL
January 4th, 2011 at 4:55 pmStill not enough to make me give up Firefox (I think I’ve grown far too dependent on all of my plug-ins), but it shows promise. I like Chrome better as a browser, and FF has ticked me off quite a bit over the last year.
Stephen Ou
January 4th, 2011 at 7:10 pmThis is a great list. I also made a $3.99 Chrome App last few weeks. It’s called OhBoard, it’s a whiteboard app made for designers & developers. I think I should be quiet now so you can give it a look: https://chrome.google.com/webstore/detail/bcnblihahnkghhpfanepicglgedodjof. And more details can be found at http://ohboard.com :-)
rajesh
January 5th, 2011 at 1:50 amCompare with “PENDULE” extension, the “WEB DEVELOPER” extension is more robust and all the functionality working well than the earlier.
Ref: http://chrispederick.com/work/web-developer/
Ameet
January 5th, 2011 at 2:05 amseriously helpful tip…
Dr.Amith
January 5th, 2011 at 2:15 amNice tips to work with chrome and designing.
Cheers.
jean-bernard breu
January 5th, 2011 at 3:33 amgoogle chrome est fantastique , j’emploie aussi opera qui est aussi tres trs bien
deytazan
January 5th, 2011 at 7:02 amPublicación que ha sido recomendada en Mister Wong:
http://wong.to/3ggmy
Wong it!
Andy @ sales++
January 5th, 2011 at 8:31 amI think this is the most useful plugin, it’s a stressful job.
https://chrome.google.com/extensions/detail/fkoiodopmfpaaebodpnjoabdpkmpacpd?hl=en
Jon MacKinnon
January 5th, 2011 at 11:28 amMeasureIt duplicates functionality that’s built into Chrome developer tools.
sachin
January 6th, 2011 at 12:04 amThanks 4 sharing such awesome extensions……………
Webomatik
January 6th, 2011 at 6:24 amChrome is not my primary browser, but I do use it from time to time. Useful list, thanks.
Web App Jobs
January 7th, 2011 at 12:08 amSpeed Tracer is a rare gem. How did I miss this? Thanks for sharing!
Michael Murphy
January 7th, 2011 at 2:47 pmGreat list Brian, thanks for posting it! This might be enough to make switching to Chrome (exclusively) possible.
Chuck
January 7th, 2011 at 4:57 pmForm Fuzzer, a utility created to assist in populating web forms with some random data.
https://chrome.google.com/extensions/detail/cbpplldpcdcfejdaldmnfhlodoadjhii
Perfect for tensting
amit
January 8th, 2011 at 2:56 amChrome is also has become a popular browser and now many web designers and developers are using it.So I can imagine this article really ll do help a lot of webmasters.Thanks for sharing this awesome article with us.
Ellie-D
January 26th, 2011 at 5:46 amSome great tips – been using MeasureIt in Firefox for quite some time, such a simple but REALLY useful tool.
jean-bernard breu
March 2nd, 2011 at 5:02 amprix qualité délai contact=$$$$
John
April 12th, 2011 at 9:44 amWebRank 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
zzllrr
August 8th, 2011 at 3:31 amgreat! maybe the 16th useful chrome extension for web designers and developers is zzllrr imager which helps you check the error images, output images attributes or even batch download all pictures. http://goo.gl/n8SMk
JimJ
November 19th, 2011 at 8:54 amAwesome, thanks for this
Enrique Stickrath
January 26th, 2012 at 2:42 amI’m not sure I’m following you. Would you mind elaborating some more on your first point?
Danny Arant
January 28th, 2012 at 8:45 amHey there. Just stopped by to say thanks for taking the time to write this. It really helped me get my head around that concept.
invest liberty reserve
March 7th, 2012 at 7:38 am15 Useful Google Chrome Extensions for Web Designers and Developers | FreelanceFolder I was suggested this blog by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my trouble. You’re wonderful! Thanks! your article about 15 Useful Google Chrome Extensions for Web Designers and Developers | FreelanceFolder Best Regards Nick Yoder
lost city apk
April 15th, 2012 at 8:19 amHello There. I found your blog using msn. This is an extremely well written article. I’ll be sure to bookmark it and come back to read more of 15 Useful Google Chrome Extensions for Web Designers and Developers | FreelanceFolder . Thanks for the post. I will certainly comeback.
draw something apk
May 9th, 2012 at 8:23 am15 Useful Google Chrome Extensions for Web Designers and Developers | FreelanceFolder I was suggested this web site by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my trouble. You’re amazing! Thanks! your article about 15 Useful Google Chrome Extensions for Web Designers and Developers | FreelanceFolderBest Regards Lawrence
Trackbacks