Articles

15 Google Chrome Extensions for the Avid Designer

June 28, 2010 • By

Google Chrome has become one of the best choices for web browsing, especially for designers and developers due to its flexability. Even though Firefox is still considered to be in the lead, it’ll only be a matter of time before most delve into Chrome. This web browser has great speed and top notch functionality due to the large variety of extensions available.

Below we’ve put together a list of great Google Chrome extensions that will help you save time and evovle the way you use your browser.

Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. This was created and developed by the same person who made the popular Web Developer extension for Firefox.

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

Pendule

Pendule is an array of useful extended web developer tools for Chrome. Use this extension in addition to the built-in Developer Tools (Ctrl+Shift+I).

Resolution Test

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/

Speed Tracer

peed 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. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).

Eye Dropper

Eye Dropper and Color Picker extension which allows you to pick color from any webpage or from advanced color picker.

PlainClothes

This extension styles — or rather “unstyles” — the web. Just imagine: text is black, backgrounds are white, unread links are blue, visited links are purple, all links are underlined. Or any other colors you like. And all text is rendered in your default fonts (as defined in “Options” > “Under the Hood” > “Change font and language settings”). Everywhere. Automatically.

You can control the extent of the “unstyling” via the Options window (“Extensions” > “PlainClothes” > “Options”), and you can toggle the “unstyling” on a per-site basis by clicking the icon in the location bar.

jQuery Shell

jQuery Shell allows you to run JavaScript and jQuery 1.4.2 commands in the context of the current web page. It is simple tool to use when experimenting with / learning JavaScript and jQuery commands.

Aviary Screen Capture

Take a screenshot of any webpage and edit it directly in your browser with Aviary.com applications. Plus convenient access to the Aviary website and tools.

This quick screen capture addon is a must-have for bloggers and designers alike! It will perform a screen capture of the visible portion of any webpage and then open the capture INSTANTLY in a basic image editor where you can do markup (draw arrows and rectangles), edit (crop, rotate and resize) and get the exact pixel colors of the image. A perfect companion tool for designers and bloggers!

Image Cropper

This extension help you to crop any images on the fly. It’s especially useful when you need to crop your online album photo for IM thumbnail.

Validity

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 Javascript console.

WebEdit

WebEdit allows you to make any webpage editable, however, the changes will no be permanent. It’ll help you visualize and structure an already-made website into what you’d like it to display. It’s a pretty useful and handy tool.

Chrome Sniffer

This extension will help web developer to inspect web framework / CMS and javascript library running on current browsing website. An icon will appear on address bar indicates the detected framework. Currently, this extension can detect up to 50 popular CMS and javascript libraries, and more will be added in future releases.

MeaureIt!

Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.

iMacros

iMacros was designed to automate the most repetitious tasks on the web. If there’s an activity you have to do repeatedly, just record it in iMacros. The next time you need to do it, the entire macro will run at the click of a button! With iMacros, you can quickly and easily fill out web forms, remember passwords, create a webmail notifier, and more. Web developers use iMacros for web regression testing, performance testing and web transaction monitoring. It can also be combined with Google Speed Tracer, Firebug and other web development and test tools. XPath support is included.

(Visited 221 times, 1 visits today)