Ah Ann Personal Blog: 15 Great Chrome Extensions for Web Designers and Developers

We have excellent browsers that increasingly incorporate more extensions, plugins and add-ons, often developed by their users, that help make them more powerful and can help us to improve our productivity. From Awwwards, in our eagerness to offer youthe best resources and tools on the Web for you, we will do a series of articles on our blog with the best extensions and plugins for major browsers. This time we focus on extensions that are offered in the Chrome Web Store, freely available and easy to install.

Among the tools we highlight those that are most useful for web designers and developers. We hope you will find them very helpful and that they help you get better results.

Best Google Chrome Extensions for Web Designers and Developers:

View in Chrome Store

WhatFont

The easiest way to identify fonts on web pages

Users: 108.154 | Rate: 4.5 /5

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.

It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

To embrace the new web font era, WhatFont also detects services used for serving the font. Now supports Typekit and Google Font API.
View in Chrome Store

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.

Users: 74.136 | Rate: 3.5 /5

Get pixel perfect with: horizontal and vertical draggable rulers; pixel, picas and type measurements, line height guides and stroke widths. Move ruul with arrow keys, one pixel at a time, and use multiple ruul together. Ruul have 4 different coloured ruul, steel and wooden ruul included.

"Every web designer or developer should have one"
View in Chrome Store

Screen Capture (by Google)

Capture visible content of a tab, a region of a web page, or the whole page as a PNG image. Support horizontal and vertical scroll…

Users: 1.676.842 | Rate: 4 /5

It's easy to use this extension to capture visible content of a tab, a region of a web page, or the whole page as a PNG image.

You can also edit your captured image before saving it as a PNG image. Highlighting, redacting and adding text are supported.

What set this extension apart are: Super fast when capturing page image, esp. for large pages; Support horizontal scroll for large pages that do not fit in one tab screen horizontally; Intelligently detect floating objects on a page and avoid repeating capture of the same floating objects if whole page capture requires scrolling; Works on Windows, Linux and Mac
View in Chrome Store

Image Downloader

See all images shown or linked on a web page and download them.

Users: 54.665 | Rate: 4 /5

If you need to bulk download images from a web page, with this extension you can: See images that the page contains and links to, Filter or sort them by URL; also supports wildcards and regular expressions, Optionally show only images from links, Select images for download by either using the checkboxes or directly clicking on the image, Dedicated buttons to download or open in new tab individual images, Customize display width, border size, style and color, Hide filters, buttons and notifications you don't need

When you press the "Download" button, all selected images are saved to the default download directory of Chrome. If you don't have one, you will have to manually choose the save location for each image.
View in Chrome Store

Evernote Web Clipper

RescueTime is a personal-analytics service that helps you understand how you spend your time.

Users: 2.592.895 | Rate: 4 /5

RescueTime is a personal-analytics service that helps you understand how you spend time on your computer, smartphone and tablet. There is no manual data-entry required. The web-application works hand-in-hand with the installable client available for OS X, Windows, Linux, Android devices, and ChromeOS.
View in Chrome Store

RescueTime for Google Chrome™

RescueTime is a personal-analytics service that helps you understand how you spend your time.

Users: 4.822 | Rate: 4 /5

RescueTime is a personal-analytics service that helps you understand how you spend time on your computer, smartphone and tablet. There is no manual data-entry required. The web-application works hand-in-hand with the installable client available for OS X, Windows, Linux, Android devices, and ChromeOS.
View in Chrome Web Store

Pinterest for Google Chrome

Discover, collect, and share inspiration

Users: 10.155 | Rate: 4 /5

Pinterest is a tool to find your inspiration and share it with others. Use it to collect things you love, organize and plan important projects, and more.

The official Pinterest extension for Google Chrome adds a button to your browser that lets you pin from any website, quickly and easily
View in Chrome Web Store

Web Developer

Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.

Users: 634.663 | Rate: 4,6 /5

Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.
View in Chrome Web Store

Stylebot

Adapt the web's appearance

Users: 78.455 | Rate: 4,5 /5

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

You pick an element and choose any changes you want to make from the editor. You can change the font size, color, margins, visibility and a lot more. The advanced users can also write the CSS manually.

Using Stylebot, you can personalize the look and feel of your favorite websites. It is also a great tool to learn CSS and for debugging your own site's design.
View in Chrome Web Store

Alexa Traffic Rank

The Official Alexa Traffic Rank Extension, providing Alexa Traffic Rank and site Information when clicked.

Users: 229.128 | Rate: 4,6 /5

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.

Get quick and easy access to a site's Alexa Traffic Rank and sites linking in. How does this site's traffic compare to other sites on the Web?
View in Chrome Web Store

Eye Dropper

Eye Dropper is open source extension which allows you to pick colors from web pages

Users: 220.009 | Rate: 4 /5

Eye Dropper is open source extension which allows you to pick colors from web pages, color picker and your personal color history.

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.
View in Chrome Web Store

Resolution Test

An extension for developers to test web pages in different screen resolutions

Users: 133.036 | Rate: 4,6 /5

An extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions.

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customise that list. It also gives users the option to turn on Google Browser Size, more info on that here - http://browsersize.googlelabs.com/
View in Chrome Web Store

Speed Tracer (by Google)

Get insight into the performance of your web applications

Users: 170.880 | Rate: 4 /5

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.

Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by: Javascript parsing and execution, Layout, CSS style recalculation and selector matching, DOM Event handling, Network resource loading, Timer fires, XMLHttpRequest callbacks, Painting and more.
View in Chrome Web Store

Firebug Lite for Google Chrome™

Firebug Lite for Google Chrome, supported by the Firebug Working Group.

Users: 767.137 | Rate: 4 /5

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.

For more detailed information, visit:
http://getfirebug.com/releases/lite/chrome/
View in Chrome Web Store

Corporate Ipsum

Generate random corporate double-speak for use as filler text

Users: 170.880 | Rate: 4 /5

A lorem ipsum generator with a corporate bent.
Generates filler content by the word or paragraph.

This is a clone (with permission) of Brian Haslanger'sCorporate Ipsum dashboard widget for Google Chrome.

Efficiently seize integrated vortals with installed base methodologies. Synergistically orchestrate leveraged data with intuitive action items. Proactively develop tactical services and interoperable networks. Efficiently create enterprise potentialities whereas interoperable e-commerce. Globally fabricate worldwide solutions via principle-centered human capital.

Planned additions: Copy output as HTML, Configurable number of sentences per paragraph.opy-output-as-html, and configurable number of sentences per paragraph.