MEEM Khan: 25 Extremely Useful Google Chrome Extensions for Designers and Developers

Google Chrome was a fairly latecomer to the browser wars but was an overnight success that instantly became the favorite of Mac and Windows users alike. Everything about Chrome, from its minimal and highly practical interface to its solid Webkit Core and robust extension system, makes it hands down one of the best ways to access the web.
For all you Chrome lovers out there, we’ve got an awesome collection of 25 extremely useful Google Chrome Extensions for Designers and Developers. Whether you’re looking for a quick way to validate your page or create a custom grid overlay, we’ve got the tool for you.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Firebug Lite

Firebug Lite provides the rich visual representation we are used to in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides some cool features like inspecting HTML elemements with your mouse and live CSS editing.

Stylish

This extension makes it easy and fun to completely redesign the visual style of a web page or site. Want to create a gray version of YouTube or a black version of Google? Stylish is your answer.
Stylish lets you easily manage user styles. Add, delete, enable, disable, and organize with a few clicks of a mouse, no code to edit, no obscure configuration to find. Stylish’s companion website, userstyles.org, hosts tens of thousands of user styles made by other Stylish users that you can try.

CSS Reloader

CSS Reloader is a browser extension that allows you to reload CSS without reloading the page itself. Just hit a quick shortcut and the page will update with the style changes.

Speed Tracer (by Google)

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. The UI is an easy-to-use dashboard full of applicable information and graphs that will help you optimize your apps.

Live CSS Editor

This extension provides a text box on any HTML page so that you can write CSS freely and immediately see the results. It’s a simple tool but it’s quite helpful for working out ideas and troubleshooting.

Aviary Screen Capture

This is a really neat little tool that captures any web page and automatically opens it up in one of Aviary.com’s many professional tools for creatives. You’ll have access to Photoshop-like tools so you can manipulate your image however you please: crop, resize, rotate, etc.

Lorem Ipsum Generator

Just a simple Lorem Ipsum generator built right into your browser. Extremely useful for when you’re creating mockups and need some filler text.

Refresh Monkey

Automatically refresh a page at a set interval. Monitor the page for a change and get notified in case of change. This is obviously the perfect tool for web developers who would like to keep an eye on code changes in the browser without constantly manually refreshing the page.

Window Resizer

This extension resizes the browser’s window in order to emulate various resolutions. If you’re jumping on the responsive web design train, you’ll want to check out this extension so you can quickly evaluate your designs at various popular sizes.

Google Font Previewer for Chrome

I’m a huge fan of Google Fonts, the free tool for applying custom web fonts via CSS. This extension allows you to quickly apply Google fonts to specific CSS selectors so you can get a fast preview of what that font will look like in your design before actually updating your files.

ruul

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

Check My Links

‘Check My Links’ quickly finds all the links on a web page, and checks each one for you. It highlights which ones are valid and which ones are broken. I can’t tell you how many times I’ve made stupid mistakes like forgetting to check my links to make sure they all work. This simple tool automates this annoying process and helps you identify what you need to fix.

Comps

If you like to code websites from Photoshop comps, you’ll find yourself constantly comparing the two to see if you’re on the right track. This extension allows you load images from your local computer and easily overlay them onto your website for comparing your code against a given design.

The Grids

This extension helps you create a custom grid overlay for any page. It has quite a few options and is quite useful in creating pixel perfect grid-based layouts.

Grayscale

With this extension you can make your pages show in grayscale, this will help you see potential problems with colors not having enough contrast. Contrast is a major element in design that improves aesthetics and usability for typical and colorblind users alike.