25+ Must-have Chrome extensions for web designers and developers

For many web designers and developers, Firefox is unsurpassable. For others, Firefox eats Chrome’s dust.

For the past two years, since Google Chrome’s release, there’s been a raging debate on which browser is superior. Mozilla’s open source product has stood the test of time and Firefox has quickly become the most used browser, having surpassed Microsoft’s Internet Explorer.

Don’t feel sorry for Google Chrome, however. Even in its infancy, Chrome has already reached second most popular, having already surpassed Internet Explorer and with a high chance of surpassing Firefox.

Although Firefox is more robust (primarily due to its popularity), Chrome is lightning fast and, with new extensions added daily, an exciting option for the serious web designer.

And here you are to find tools that make Chrome useful to you as a designer or a developer. Fortunately, Chrome has a burgeoning collection of extensions that will make the transition from Firefox a lot easier.

1. AppJump App Launcher and Organizer

After you finish downloading all the extensions in this list, you’ll definitely need an organizer. AppJump is a Chrome extension that allows you to locate and launch your applications and other extensions quickly from a drop down menu on your toolbar. One cool feature of AppJump is the ability to organize apps and extensions into different groups. For example, you can easily separate your work extensions from your personal, for more effective time management.

2. Awesome Screenshot

Awesome Screenshot lives up to its name. This awesome extension allows you to take snapshots of the whole or partial page. After taking a screenshot, you can circle or underline relevant parts, blur out irrelevant parts and make comments. You have the option to save to local or upload and receive an image link for sharing.

3. Aviary Screen Capture

After waxing poetic about Awesome Screenshot above, you may wonder why two screen capture extensions are added on this list. One downside to Awesome Screenshot is that it requires access to all the data on your computer and your browsing history. For those users who feel that is an invasion of privacy, Aviary is a perfectly capable option.

4. Chrome Sniffer

Chrome Sniffer allows you to check the framework of any website. It locates and displays any known Content Management System (CMS) or Javascript library on a website. This extension is great for those mind-blowing websites that leave you wondering, “How is that humanly possible?” Currently, Chrome Sniffer can detect over 100 frameworks.

5. Cloud Save

There’s a huge shift from operating locally to working in the cloud. As designers and developers, you are accustomed to working on the internet, but do you also save important files online? If your excuse is that it’s not so convenient, you may want to take a serious look at Cloud Save. Cloud Save allows you to save files from any website to supported cloud services. Save to Amazon Cloud Drive, Dropbox and Flickr.

6. Code Cola

Code Cola is an extension that allows users to edit individual pages inside of a website. The extension allows you to click on an area within a web page and edit the CSS automatically.

7. Corporate Ipsum

Corporate Ipsum is a fun alternative to the standard Lorem Ipsum text filler. With this extension, you can populate your website with “corporate” speak and buzz words. An example of Corporate Ipsum is, “Competently target enterprise-wide data with multifunctional ideas.” This extension is based on the popular Mac widget of the same name.

8. Diigo Bookmark, Archive, Highlight and Sticky Note

Diigo is short for Digest of Internet Information Groups and Other stuff. It is an online research tool that allows users to manage information. Highlight webpages in multiple colors, make sticky notes, exchange pages across your social network and create groups to share your research.

9. Drag2up

Drag2up is an easy to use file attachment system. Instead of clicking through various windows, simply drag the file you’d like to attach from your computer onto the input field. Alternately, you can upload files to various hosting sites, including Flickr, ImageShack, Twitpic, and Box.net. This extension is easily one of the must-have downloads.

10. Eye Dropper

Every now and then, you come across the perfect shade of green that you must incorporate into your web design. The Eye Dropper extension allows you to locate the exact shade. It also keeps track of your colors history.

11. Firebug Lite

Firebug is one of the great tools that makes it difficult to transition from Firefox and leave it behind. Fortunately, Chrome has an extension called Firebug Lite that offers a similar function. Firebug Lite works along side Chrome Development Tools to enable developers to inspect and edit HTML and DOM elements. It also allows you to debug with ease. Firebug Lite is actually a JavaScript file that acts like the original Firebug once inserted into a web page.

12. Greplin

Greplin is an extension that allows you to search within your private data. Use this extension to locate a piece of information you post on various social websites, including Twitter, Facebook or even Gmail. It indexes your data for easy searching. Instead of dredging through your history, you can easily call up data with Greplin.

13. HTML Instant

HTML Instant is a real time HTML. It features a split screen. As you type your code on left side of the split screen, you see the results automatically on the right side. HTML Instant not only works with HTML, but it also supports CSS and JavaScript. You can also upload images from your Image Shack, Photobucket, or a random website that’s hosting an image. This HTML editor is very user friendly, for the novice designer.

14. IE Tab

The IE Tab extension allows you to view a webpage from a simulated Internet Explorer, while still using your Chrome browser. Internet Explorer is still the preferred browser of most internet users. And there are still some sites that work best or even exclusively with Internet Explorer. This tab allows you to use Internet Explorer without sacrificing your dignity. First things first, IE Tab only works on Windows. This is because it uses Window’s built in rendering engine for Internet Explorer. For that reason, Mac users are out of luck on this one.

15. Image Properties Context Menu

Image Properties Context Menu is a useful Chrome extension that provides information on all things related to a selected image. Users can find both the location and the source of an image. It also shows the image’s dimensions and file size. It’s a simple but effective extension that is somehow not included in the Chrome browser.

16. MeasureIt!

MeasureIt is a ruler that you use to find the dimensions of any element on a web page. Simply click on the extension and drag out the ruler to find the dimensions quickly and easily.

17. Microstock Photo Power Search Tool

What separates a good web designer from a great web designer is knowing where to go for stock images. Any designer knows that finding the right image is one of the most time consuming parts of design, especially if you have several go-to resources. This extension allows you to search microstock on 5 of the top stock agencies, including Dreamstime, Fotolia, and Shutterstock.

18. Palette for Chrome

The Palette for Chrome extension is instantly useful. Right click on any image you’d like to use. This extension creates a 16, 24, or 32 color palette. Alternatively, you can also create a custom palette. Use this extension to incorporate and convey the colors from your favorite image into your web design.

19. Pendule

The powerful Pendule extension combines several of the extensions found in this list. Pendule allows you to view and alter Javascript and CSS. You can also view information about specific images or hide them altogether. It’s a robust developer tool that includes a color picker, an HTML and CSS validator and a link checker.

20. PlainClothes

PlainClothes is a fun and useful extension that allows you to see the bare bones of a website. Sometimes it’s easier to see mistakes in a design or analyze why it works so well when it goes black and white. PlainClothes allows you to strip down an webpage to one text color, one background color and one link color. Links are underlined, text is your default and suddenly, you’re in 1998 again. Actually, PlainClothes works very well for adding accessibility to your web design.

21. Resolution Test

Change the size of your browser to test your website in various resolutions. Resolution Test comes with preset resolution sizes, but you can also view in your own specified resolution.

22. Search by Image

Search by Image is one of my favorite Chrome extensions. This extension allows you to find a specific image on different websites. With Search by Image, you also have the option to find similar images. Simply right-click on the image of interest and select “search Google with this image.” You will find pages that include matching images or are visually similar.

23. Session Manager

The Session Manager extension saves all of your currently opened tabs for later perusal. This extension is extremely useful if you, like most, find yourself opening the same pages over and over again. Group and save related tabs in Session Manager. For example, bundle all of your social networking sites together so that you can quickly access them without having to individually open each site. And close them just as quickly, with assurance that your tabs are saved.

24. TabJump

Similar in scope to Session Manager, TabJump goes a step beyond. Not only does it manage your tabs, this extension can also lock tabs, preventing you from closing an important tab accidentally. If you do close a tab by mistake, TabJump will allow you to re-open it, but keep in mind that extensions cannot restore history.

25. TooManyTabs

Because there can never be enough extensions to address browser tab management, TooManyTabs is another must-have. This extension shows a thumbnail of all of the tabs you have open. This comes in handy when you’re operating with so many tabs that you can no longer read the tab titles. Having a visual aid helps you sort through your workspace effectively.

26. Web Developer

Web Developer is another comprehensive developer tool. It is by the same developer who wrote the wildly popular Firefox extension. With this extension, users can view and edit CSS, display image file sizes and clear session cookies.

27. WhatFont

For most web designers, fonts are kind of a big deal. Have you ever happened upon a random website and found the perfect font, only to search endless code for answers? If you like things simple, install this font finding extension. Simply hover over a text and find the font in use. Not only will this extension tell you the name of the font, it also gives font size and color.

Do you have any favorite extensions that didn’t make this list? Please share it with us in the comments.

Jacqueline Thomas

Jacqueline Thomas is an award-winning writer and web design consultant. Find her on her website and follow her on Twitter.