30+ Valuable Chrome Extension For Web Designers & Developers

Google chrome is the most commonly used web browser and it has achieved huge fame with its extra ordinary performance and features. Google chrome has also launched the number of extensions and add-ons for the ease of web developers and designers. These extensions help them effectively and save more time. On the other hand Chrome is the first browser to incorporate machine translation in the browser itself. Google chrome provides a platform “Chrome Web Store” it is an online marketplace where you can discover thousands of apps, extensions and themes for Google Chrome. Today we have compiled some of Google chrome extension for the ease of web designers and developers. Just Scroll through this list. I guess you will find number of new extensions to make your work more effective with ease.

Color Picker 0.9

This extension is ‘mainly meant for experienced web developers’ who need to Pick colors on any web page, either pixel exact or within an area. Quickly see color changes on their website without the need of external applications or to search for the right spot in style sheets or code.

 Palette for Chrome

Do you want to create a color palette that matches an image from your website? Or maybe you just want to grab some colors for inspiration? Then this is the extension for you!

Colour Tweaker

Quit trying to guess hex codes when tweaking/editing colors in Inspector, and get them spot on first-time with this extension’s live-updating palette, perfect for picking the ideal color!

Google Font Previewer for Chrome

Lets you choose a font from the Google Font API directory, and apply that font to the entire page or a specified CSS selector to see how it looks. Useful when you’re designing a website and want to quickly find a font that will look good. If you always use the same fonts, you can star them for quick access.

Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension.

CSS Viewer

CSSViewer shows the css parameters of any element in a web page, to enable/disable it simply click the toolbar icon and then hover any element on you want to inspect in the page.

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).

PHP Console

PHP Console is extension that displays errors/exceptions/debug messages handled by class PhpConsole and Lagger in Google Chrome console and in notification popups.


Sight is the Syntax Highlighter Chrome extension that makes reading code on the browser a joy.

JavaScript API Search

This extension adds support to the Chrome Omni box to search for and auto complete JavaScript functions and prototypes from online JavaScript reference documentation.

Stay Focusd

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

Google Similar Pages beta

Enjoying the page you’re looking at and interested in other similar pages?  Trying to find more pages about a topic you’re researching, but having a hard time coming up with the right query on Google?  Google Similar Pages can help! Now you can quickly preview and explore other pages that are similar to the one you are browsing — on the fly.

The Microstock Photo Power Search Tool

The Microstock Photo Power Search Extension makes it easy to find awesome microstock photographs for your website or blog, for your design or print projects, or for any other reason you need great photographs or illustrations for a low price.

Proxy SwitchySharp

Use Chrome Proxy API instead of changing system proxy settings. It supports auto switching, which switches among proxy profiles according to URL rules.

Alexa Traffic Rank

Alexa Traffic Rank is Alexa Internet’s free extension for Chrome, and is the only extension that includes you in Alexa’s traffic panel. The Alexa extension accompanies you as you surf, providing you with Alexa data about the sites you visit without interrupting your browsing.

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 elements with your mouse, and live editing CSS properties.

Lightshot (screenshot tool)

LightShot is a tool allowing you to easily make screenshots of any selected area. You just hit Lightshot icon on the toolbar, then select area you want to make a screenshot from and click “Save” or “Upload to server”. In case of uploading you instantly get link to a screenshot you’ve just uploaded


A simple tool to quickly check the position of a list of sites given a keyword. For example, on the sample image you can see Wikipedia ranking #1 and Amazon ranking #18 for the keyword “lcd”.

Image Properties Context Menu

A simple context menu extension to show the properties of an image. 

SEO Site Tools

SEO Site Tool is the most comprehensive SEO Tool on any browser… not only does it pull more metrics from more sources, including social media reactions, it also enhances common tools like Yahoo Site Explorer and Google Webmaster tools with links anchor text and page rank. Even no follow link highlighting, pop out ability, color themes.


Validity can be used to quickly validate your HTML documents from the address bar. Just click the icon in the address bar to validate the current document without leaving the page.  The number of validation errors can be seen in the tool tip and the detail can be seen in the console tab of Chrome’s developer tools.

Domain Availability Checker

This extension checks the availability of a domain name. What’s the point of going to another page when you can check it from your toolbar. It fully supports IDN Domains encrypted with Puny Code for safe transmission.

ruul. Screen ruler

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

PHP Docs

A PHP document is opened from a selection character string.  PHP docs support different languages such as Deutsch, English, French, Turkish, Spanish, Polish, Portuguese, Romanian and Japanese

Awesome Screenshot: Capture & Annotate

Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text and blur sensitive info in just one click.

TinEye Reverse Image Search

TinEye is the first image search engine on the web to use image identification technology rather than keywords, metadata or watermarks. When you submit an image to be searched, TinEye creates a unique and compact digital signature or ‘fingerprint’ for it, then compares this fingerprint to every other image in our index to retrieve matches. TinEye does not typically find similar images; it finds exact matches including those that have been cropped, edited or resized.

Lorem Ipsum Generator

Chrome Extension that generates random “Lorem Ipsum” text. It uses a minimalist and well looking design. Many other extensions of this type – in other browsers – simply complicate this task, using really extensive code, XHR, etc. The main purpose of this one, is to use the less amount of code (and also memory) and help the developer/user to get the job done.

Check My Links

Check My Links’ is an extension developed primarily for web designers, developers and content editors. When you’re editing a web page that has lots of links, wouldn’t it be handy to be able to quickly check that all the links on the page are working ok? That’s where ‘Check My Links’ comes in


Comps is an extension inspired by the PixelPerfect Firefox extension. It allows you to load images from your local computer and easily overlay them onto your website for comparing your code against a given design.

The Grids

The Grids is a browser utility that helps web designers and developers improve their site performance. It allows quickly and easy generates custom modular grid right from your browser. Wide ranges of options will suite any professional needs.


With this extension you can make your pages show in grey-scale, this will help see potential problems with colors not having enough contrast.


Web developer tools for Chrome are an extended web developer tools for Chrome. Use this extension in addition to the built-in Developer Tools (Ctrl+Shift+I).

HTML Instant

Edit HTML code in real-time. Just enter HTML, CSS, or JavaScript in the left pane and you will get instant results as you type in the right pane. Great for editing on the fly and for teaching/learning HTML.

HTML Validation

This is a small extension giving the HTML validity of the current visited page. If any errors are detected, it gives the number of errors and warnings. It uses the excellent approved’s validator.

SEO & Website Analysis

SEO report is an extension for Google Chrome done by Woo Rank that provides a very deep SEO report for any given website.

Written by Ahsan.Saeed

A Muslim, A Patriot, A Graphic Designer by profession!
Sometimes Search Engine Optimization
and Video Editing!



Top 5 Vacation Destinations around the World for Great Photos

Catching The Childhood Making Bubbles, Girls just want to have Fun [photos]