1. Benchwarmer

What if the first tab in your browser every morning was a healthy shot of inspiration? Benchwarmer is a neat extension for Chrome that replaces the "New Tab" screen with six shots from Dribbble. Dribbble is an invite-only, high-quality community of designers who share what they are currently working on, in the high altar of pixel-perfection.

Once installed Benchwarmer defaults to the latest top-rated shots; however, you can customize this view using the gear symbol. Hovering over a shot shows its number of likes and who posted it. You also can enter your own Dribbble username to display the work of users you follow.

The extension is open-sourced on Git Hub, if you are looking to contribute.



2. ColorZilla

When ColorZilla launched for Firefox over seven years ago, it was one of the first browser-based color pickers available. This official port for Chrome proves equally useful and includes a color picker, eye dropper and gradient generator, along with additional advanced color tools. You can get a color reading from any point in the browser (and save these colors in custom palettes), make edits on the fly and paste the output (in CSS, Hex, RGB and more) into other apps.

The ability to analyze DOM elements on a webpage and inspect its palette of colors is a particularly valuable feature. You can also pick colors from Flash Objects at any zoom level, and generated or sampled colors automatically copy to the clipboard.




3. WhatFont

The days of right-clicking to "view source" are long over. WhatFont identifies all the fonts used on a webpage and gives in-depth details, such as the font family, font size, along with the color, weight and line height (you can even tweet this information). Apart from native web safe fonts, it detects the services used for serving the font and supports Typekit and Google Web Fonts.

It gives you the fall-back string, and if a font called for is not installed, it's striked-through, showing the actual font used. It's important to remember it only works for online pages, not locally. Once activated, hover on text and a pop-up displays all the selected fonts information.



4. Screen Capture

An official Google extension, Screen Capture quickly captures visible objects, whole pages, visible sections of pages and drawn selections as PNG files. Each snapshot can be edited and annotated (before being saved), and highlighting, lines, arrows and redacting and adding text are fully supported. It intelligently detects floating objects on a page to avoid repeating the capture of the same objects if the whole page requires scrolling.

It works quickly, even when capturing large pages, and will also scroll the page horizontally if necessary. Share the snapshots on Picasa, Facebook and Imgur for instant collaboration.

Also of note is Awesome Screenshot, which boasts a rich feature list for capturing and annotating webpages.


5. Evernote Web Clipper

When we spend most of our time using a web browser, storing and cataloging information effortlessly becomes essential. The Evernote Web Clipper for Chrome makes it quick and easy to store just about anything you find on the web in your Evernote account, including selected text, articles, links, PDF's, images and even entire webpages. Tag each snapshot when saving and select an Evernote notebook in which you'll store the snapshot. The "intelligent," context-aware functionality is impressive, with the pre-selection of notebooks (and tags) based on website content.

There is virtually no limit to the ways in which you use it; for example, you could collect inspiration for a particular design project you are working on, and have access to it whenever you need, even if the original is removed.


6. Pixlr Editor

Pixlr Editor is a fully featured photo editor available directly in your browser. Sharing interface similarities to Adobe Photoshop, the learning curve is low and it boasts a wealth of capabilities you would only normally find in a desktop application. The fast, intuitive, thoughtfully organized interface means quick edits are a breeze. It includes editing, filters and adjustment tools and even opens PSD files.

Accomplish image editing entirely in the cloud using Pixlr Editor -- open images from Facebook, Picasa or Flickr, edit them and then save back to the cloud.


7. MeasureIt

With MeasureIt, draw out a ruler which shows the alignment and exact pixel width and height dimensions of any selected element on a webpage, an especially useful tool when designing and developing websites. To use the extension, just click and drag out the ruler to find an element's dimensions quickly and easily.

While not as feature-rich as its Firefox counterpart, it is especially useful when tweaking CSS, where accuracy down to the last pixel is necessary. MeasureIt works on local installs of most CMS's but does not work on local HTML files.


8. Palette

Colors play an important role in design, and it can be challenging to create the "perfect" palette. Having an extension such as Palette at easy reach within your browser can make this particular task much more efficient.

Palette for Chrome can create up to 64 color palettes and is useful for grabbing ideas and inspiration for color palettes from images around the web. The interface is intuitive and easy to use; simply right-click on the desired image, select "Palette for Chrome," and choose the number of colors you want the palette to generate. A new tab will open, displaying the image and resulting color palette.

The extension was recently updated to fix several bugs, and the code is now open-source and available on Git Hub.


9. Yet Another Lorem Ipsum Generator

When testing content or typography, dummy text can be useful. For those who don't use alternatives, try Yet Another Lorem Ipsum Generator. It will generate text (paragraphs of variable length), titles, dates and dummy email and web addressees, with other options available via the toolbar button. You can configure the date format and choose specific dates or generate a random date.

Copy text to the clipboard for use in other apps; the extension itself is extremely lightweight as it doesn't include any external libraries or require access to other online resources.


10. Pendule

Pendule complements the built-in developer tools of Chrome and makes website edits easy, such as viewing CSS, disabling styles, reloading CSS (without having to reload the entire webpage), viewing JavaScript and much more. The extension itself is unobtrusive, quick and responsive, featuring an extensive toolset. The the ability to switch off both images and CSS is particularly useful when designing and developing websites.

There is also a color picker, display ruler, link checker and several script validators, with each feature neatly arranged into groups. The option to change the display resolution, for checking how your website renders on multiple screen resolutions, is neat, and you can even set keyboard shortcuts for the extension from the Options menu.


As a designer you may have used Google Chrome for some time already, but are you using the browser to its full advantage? Chrome features a robust extension system that deserves to be explored and tested. It's one reason Chrome can now claim to be the world's most popular browser.

We've gathered 10 of the best Google Chrome extensions for web designers and, when used in combination with the chrome extensions for developers, you could have a fully customized, powerhouse of a browser, completely suited to your individual requirements.

Have we missed any great extensions you love and use on a daily basis? If so, please share your recommendations with other readers in the comments below.

Homepage image composite via iStockphoto, Kameleon007































View the Original article

2. Firebug Lite

A must-have extension for many web developers, and for good reason, Firebug allows you to analyze network performance and activity, and edit, debug and monitor HTML, CSS and JavaScript live on any web page. It's not a substitute for Chrome Developer Tools, but works alongside it to allow you to debug with ease.

Written in JavaScript, it is integrated into the toolbar and can be activated on a particular domain. It loads before all other scripts and is quick to load itself, as all code and images are stored in the extensions directory on your machine.



2. Web Developer

The official port of the long-time favorite Firefox extension, Web Developer, takes the form of a toolbar and boasts a wealth of options, including analyzing web pages and layouts, testing your code and making edits on the fly.

While not as feature-rich as its Firefox counterpart, it still offers a variety of invaluable tools, such as the ability to show hidden elements, populate forms, control browser cache and quickly modify and switch between stylesheets.



3. Session Manager

When you're working on the web, browser tabs management is a priceless skill -- it's so easy to slip into bad habits and become "tab happy." Session Manager saves your browsing state and lets you re-open the session later. It is particularly useful if you find yourself opening the same web pages over and over.

The extension groups and saves related tabs, so for example, you could save your favorite news or social networking sites under their own session names, and then quickly access them without having to individually open each website.



4. Clear Cache

This simple but supremely useful extension allows you to clear your cache from the toolbar. It works "silently," meaning there are no annoying popups or confirmation dialogs to distract you. It's completely customizable in terms of how much data you want to clear, including app cache, downloads, file systems, form data, history, local storage, passwords and much more, available in the Options settings.
Combine this with the extension Edit This Cookie and you have perfect control of your cache and cookies, for web development.



5. Chrome Sniffer

While experienced web developers can simply look at a website's source code to understand what frameworks and technologies it's using, or even use a resource such as Built With, a quicker, more convenient way exists for Chrome. Chrome Sniffer lists all known JavaScript libraries and CMS frameworks that a websites uses, and can currently detect more than 100 popular CMS and JavaScript libraries.

Once installed, an icon will appear on the address bar indicating the detected frameworks on a website, with version detection. The code for the extension itself is GPL, available on GitHub.



6. JSONView

As a developer working with Restful API, reading raw JSON data on a browser can be painfully awkward. It's much easier to read well formatted JSON in tree view, rather than in its raw data format. The Chrome extension JSONView (an unofficial port of the Firefox extension), helps you view JSON documents in the browser.

Instead of being forced to download or be rendered as text, the extension presents documents in the browser similar to how XML documents are shown. The document is formatted and highlighted, and arrays and objects can be collapsed and expanded.



7. Resolution Test

The process of testing the look and feel of your website in different resolutions is not one many web developers look forward to. What Resolution Test does, though, is to make that process efficiently straightforward. The extension changes the size of the browser window to preview the website in different screen resolutions. Choose from a list of commonly used screen resolutions, with an option to customize the list according to your requirements.

Click on a specific resolution or a combination thereof and hit "View all selected." The browser window launches and resizes to the exact specifications you asked for.



8. Edit This Cookie

Inspired by the lack of a good cookie manager in Chrome, Edit This Cookie fills that role with ease. The clean, organized interface makes it simple to edit, add, delete, search, protect or block cookies. It presents your current cookies, their values and what properties are attached to the cookie, all of which can be modified.

It's easy to export or import cookies, limit the expiration date of any cookie, or even create a custom cookie -- you will find the "Delete All" feature supremely useful, too. Using the extension proves much quicker than going through the Chrome settings screen to search for cookies related to a particular website.

9.

Page Speed Insights

Created by Google, Page Speed Insights analyzes all aspects of a page load, including resources, DOM, network and the timeline, and provides suggestions to make them faster. It integrates well with the Developer Tools toolset and runs the open-source PageSpeed Insights SDK securely, to optimize images, JavaScript, CSS and HTML resources on a website.

It gives specific suggestions for improvement and generates a numeric score, indicating the room for improvement on the current page. When a page is being analyzed, PageSpeed displays the list of web performance best practices, sorted by importance and priority.

Also of note is YSlow, Yahoo's page performance extension that uses either a predefined or a user-defined rule set.



10. Postman - REST Client

A potential Swiss army knife for web service developers, Postman is a powerful HTTP client to let you test REST web services. With its incredibly clean and intuitive interface and a rich feature set, it's an ideal way to quickly test your requests when developing a REST app. Being able to switch environment variables, from local testing to deploying to the cloud and testing there, is supremely useful. The low learning curve also means you will be building and testing RESTful web services quickly.

Requests can be grouped into collections, enabling support for multiple projects, with the ability to export and share these collections with others, allowing you to collaborate on the same set of requests.



Working on the web means spending huge chunks of your time within the browser. If Google Chrome is your workhorse of choice, it pays to explore what extensions are available to make your daily tasks less of a chore.

While Chrome has a set of developer tools built in, you can access a wealth of extra extensions that add valuable functionality.

This post covers 10 of the best Google Chrome extensions for web developers to utilize in their everyday tasks, with an upcoming post on Chrome extensions for designers.

Are there any great extensions that we missed? If so, please leave a comment and share them with other readers.

Photo composite images courtesy of dAKirby309, tannerrussell





















View the Original article