16 Useful Web Design & Development Chrome Extensions

Google Chrome is world’s most popular web browser. This web browser is backed by the excellent community support and developers from all over the world. Many web designers and developers have certain special requirements which need to be taken care by the web browsers and the special authoring tools that are used by them. Google Chrome has a number of good plugins and add-ons which offer a number of interesting opportunities for the web developers. Here are some of the best Google Chrome Extensions which are suited for the web developers & designers.

Window Resizer

This extension resizes the browser’s window in order to emulate various resolutions. It 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).


Stylebot Social

Stylebot allows you to quickly manipulate the appearance of any website (using custom CSS).


Eye Dropper

Eye Dropper is extension for Google Chrome and Chromium. It allows you to pick color from any webpage or from advanced color picker. It is great tool for web developers.


Awesome Screenshot: Capture & Annotate

this Chrome extension “Awesome Screenshot” is so helpful in giving feedback on web design.


AutoPager Chrome

AutoPager is a Chrome extension which automatically loads the next page of a site inline when you reach the end of the current page for infinite scrolling of content.


Web Developer

The Web Developer extension adds various web developer tools to a browser. The extension is available for Firefox and Chrome, and will run on any platform that these browsers support including Windows, OS X and Linux.



Extended web developer tools for Chrome.


Firebug Lite for Google Chrome

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.


jQuery API Browser

Quickly browse through jQuery API documentation with autocomplete search.


CoffeeConsole: A Chrome Extension

A Chrome extension compatible with Chrome 18+ to allow writing of CoffeeScript within the Web Inspector and run it within the context of the current window, just like the built-in console.



dotjs is a Google Chrome extension that executes JavaScript files in ~/.js based on their filename.


Chrome DevTools Autosave

Chrome DevTools let you edit CSS and JavaScript. It even allows you to save it. I think, it’s annoying to choose a folder you want to save to for every file. DevTools Autosave saves the files on every change for you!



What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.


ruul. Screen ruler

A fantastically simple on-screen ruler for lining up and measuring type, line height, strokes and just about anything on the web.



YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page.



JSONView port for Chrome.


Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.