DevGrow - Design, Develop, Grow.

10 Must-Have Google Chrome Extensions for Web Developers

What can I say, I’ve been in love with Google Chrome since they day it was released. I resisted using it until extensions were added, as I was highly dependent on my Firefox plugins as a web developer. As Chrome gets more and more popular, tons of great extensions are being developed that have made it one of the (if not the) best browsers around.

The Top 10

I’m always looking for ways to increase productivity and improve my overall experience in the application I spend the most amount of time in: my web browser. The following are 10 Chrome extensions, when used in conjunction with the Chrome element inspector, that have helped make web developing on Chrome a lot less painful:

1. StayFocusd

This extension is highly recommended. StayFocusd is a productivity extension for Google Chrome that helps you stay focused on work by restricting the amount of time you can spend browsing time-wasting websites. Once your allotted time for the day has been used up, the sites you have blocked will be inaccessible for the rest of the day.

2. Eye Dropper

Eye Dropper is extension for Google Chrome and Chromium that allows you to pick color from any webpage or from an advanced color picker.

3. SEO Site Tools

SEO Site Tools provides extensive information on the SEO and ranking of the site. It includes on-page/external metrics, social media info, Google PageRank and various other rankings for Yahoo, Bing and Alexa. The tool also checks the page content for validation, proper title tags (for better SEO rankings) and even provides suggestions for improving the overall site ranking. After trying this extension out for the past couple of days, I have to say I highly recommend it for any site! (thanks to Ileane for suggesting it)

Note: SEO Site Tools has replaced ChromeSEO here, as I feel it is a more comprehensive extension for all things SEO.

4. CSS Reloader

CSS Reloader is an extension that allows you to reload all the CSS of any site without you have to reload the page itself. To use this extension just press F9, and the loaded stylesheets will reload. The only drawback to this extension is that it does not support files on your local machine using the file:// protocol (however localhost should work).

5. Pendule

Pendule is an advanced set of web developer tools that allows you to easily view the (css|javascript|html) sources, adds links to popular accessibility and validation checks, and it includes a color picker and display ruler as well.

6. Awesome Screenshot

Awesome Screenshot lets you capture the whole webpage or any portion of it, annotate it with rectangles, circles, arrows, lines and text, and blur sensitive info. It supports PNG format and even has 1-click uploading (of course you can save it locally instead).

Note: Awesome Screenshot has replaced Screen Capture here, as it provides a great annotation system while providing the same screen capture ability of it’s competitors.

7. Stylebot

Stylebot is a Chrome extension that aims to simplify customizing the web, making it more accessible and adaptable. It puts you in control of the web’s presentation, allowing you to quickly change the appearance of any page. You simply launch Stylebot on a page, pick an element and apply styles to it.

8. MeasureIt!

As the name of the extension suggests, MeasureIt! provides a display ruler that lets you easily determine the dimensions of anything in your browser window.

9. Ultimate Chrome Flag

This extension shows a country or region flag indicating the location of the website you’re visiting (where server is hosted). Clicking on the flag produces a drop-down with a lot of great information, including the IP address, Pagerank, Alexa Ranking and WOT ratings.

10. Speed Tracer

Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs.

Also Noteworthy:

11. Web Developer

Similar to Pendule, the Web Developer extension adds a toolbar button to the browser with various web developer tools, including CSS and form manipulation, multiple validation links and even has a built-in color picker and ruler. Thanks to cmsguy for the suggestion.

12. Firebug Lite

Firebug Lite is not a substitute for Firebug, or Chrome Developer Tools. It is a tool to be used in conjunction with these tools. Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elemements with your mouse, and live editing CSS properties. Thanks to Jeff for the suggestion.

Conclusion

There are so many great extensions available for Chrome that I know I’ve missed a few other good ones – if you have any suggestions for this list, leave them in the comments so we can check them out!

As always, be sure to subscribe to the RSS feed, join our Facebook group and follow us on Twitter!