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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot


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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

Rulers, Guides, Eye Dropper and Color Picker

For UI developers. Pick any color from webpage using eye-dropper tool; display rulers, guides and grid on the page.

screenshot

Pendule

Pendule is a large collection of developer tools for Chrome. You can view and validate code, disable styles, view used colors, hide images, show passwords and a lot more.

screenshot

WhatFont

WhatFont is an awesome tool that you can find on many browsers. It’s quick, easy, super attractive and tells you not only the font name but the size and line height as well.

screenshot

Palette for Chrome

A neat little tool that quickly grabs colors from any image and helps you instantly build solid color schemes.

screenshot

Guides

Keep your elements in line with Guides! Check distances, alignments and more to make sure your websites are pixel-perfect.

screenshot

HTML Instant

HTML Instant is a nice and simple, double pane editor that allows you to enter HTML, CSS or JavaScript on the right and instantly see a live preview on the left.

screenshot

HTML Validation

A quick and easy way to validate the current page using w3.org.

screenshot

SEO & Website Analysis

SEO & Website Analysis by WooRank is an extension for Google Chrome that provides a deep SEO analysis covering more that 50 SEO and Usability criterias.

screenshot

Browser Compatibility Detector

Cross-browser compatibility is the biggest pain you’ll face when developing websites. This tool can help you quickly identify potential problematic areas in your code.

screenshot

Neo Vision

Neo Vision provides syntax highlighting when viewing source files. The cool part is that there are multiple customizable themes so you can make the code look however you want.

screenshot

What’s Your Favorite Google Chrome Extension?

Now that you’ve seen our collection of Google Chrome Extensions for designers and developers, leave a comment and let us know what your favorite extensions are. Also, have you tried any of the extensions above? What did you think of them?