Ben Shoemate's Notebook

I have only recently made the switch to using Google Chrome as my default browser, and at the same time I began using it for working on my freelance web design and development projects. Although I still find myself wandering back to Firefox every now and then because of my dependency on the Firebug extension that Chrome has yet to completely duplicate, I am thoroughly satisfied with the Chrome browser’s speed, use of screen space, and more.

In this post, I will share with you some of the best Chrome extensions I have found useful when designing and developing websites, listed in alphabetical order.

1. Aviary Screen Capture

Aviary Screen Capture lets you take a screen shot of any web page. Use the Aviary.com applications after you’ve gotten your screen shot to edit that shot from within your browser. The basic image editor lets you mark up (by drawing arrows and rectangles), edit (crop, rotate and resize) and get the exact pixel colors of the image.

Features include:

• Save to desktop, host online, or edit in other Aviary apps
• Captures instantly
• Screen capture of the visible portion of all web pages and images
• Capture entire web pages
• Add visual notes like arrows, text and highlights to your capture
• Crop your capture
• Resize, rotate and flip your capture
• Smart select and move of captured elements
• Grab color information from the page
• Quick launch six Aviary design tools including image editor, markup editor, vector editor, color palette editor, effects editor & audio editor

2. Chrome SEO

Chrome SEO provides easy access to search engine optimization tools. These tools help you with daily SEO tasks like competitive analysis, keyword research, backlink checks, page rank checks.

3. Chrome Sniffer

Chrome Sniffer allows web developers to inspect web framework / CMS and JavaScript library running on a website. The extension displays an icon indicating the detected frameworks. Currently, this extension detects up to 70 popular CMS and JavaScript libraries.

4. Eye Dropper

Eye Dropper allows you to pick color from any web page or from an advanced color picker.

5. Firebug Lite for Google Chrome

Firebug Lite for Google Chrome is not a substitute for Firebug (unfortunately), or for Chrome Developer Tools. Instead, you should use this tool with these other tools. Firebug Lite provides the rich visual representation similar to that of Firebug with HTML elements, DOM elements, and Box Model shading. Firebug Lite also provides some cool features such as inspecting HTML elements with your mouse, and live editing CSS properties.

6. IE Tab

The IE Tab is available through Internet Explorer and lets you display web pages in a Chrome tab. This extension is great for web developers who want to cross browser test with the IE rendering engine. (This is a Windows only extension.)

7. Instant Image Editor

Instant Image Editor lets you right-click any image or element on a web page with a background image while holding down the alt key (ctrl key on Linux). You can edit the image instantly in a new tab using Pixlr, which is a fast, easy-to-use app that runs in the browser. When right-clicking an element that is not an image, Instant Image Editor will also try to determine whether the element has a background image that is editable.

8. Lorem Ipsum Generator

The Lorem Ipsum Generator generates random “Lorem Ipsum” text using a minimalist and attractive design.

9. MeasureIt!

MeasureIt! lets you use a ruler to get the pixel width and height of any elements on a web page.

10. Pendule

Pendule provides extended web developer tools for Chrome. Use this extension with the built-in developer tools, which include view, reload and disable CSS, view JavaScript, forms editing, view, hide and get information about images, color picker, ruler, topographic view, markup validators and more!

11. PHP Console

PHP Console is an extension for Lagger (lightweight and flexible open-source PHP library for errors/exceptions/debugs handling in PHP) that displays PHP errors/debug messages in Google Chrome console and in notification popups.

12. Speed Tracer

Speed Tracer helps you to find and fix performance problems in your web applications. This extension visualizes metrics taken from low-level instrumentation points inside of the browser and analyzes them while your application runs.

This application helps you understand 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 …

13. Web Developer

Web Developer adds a toolbar button to the browser with various web developer tools. This is the official port of the popular Web Developer extension for Firefox.

14. Webpage Screenshot

Webpage Screenshot is a fast and simple extension to capture the whole web page. Even long pages are saved in one image file. This extension lets you save PNG/JPG image of any web page with just one click.

Features include:

• Has drawing tools: line, ellipse, rectangle, arrow
• Lets you add text to your screenshots
• Fast Crop your image to desired dimensions
• Start Editing even before image is ready
• Upload and share to Facebook, Twitter, Gmail, MySpace
• Print: Image Sent directly to printer
• Save to HD: The only extension that let you save large images to your Hard Drive
• Can capture local files: Can capture “FILE://”
• Comes with Color Picker: Remembers the last color you used.
• Can capture horizontal websites as well

15. Window Resizer

Window Resizer resizes the browser’s window to emulate various resolutions. This extension is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions. The resolutions list is completely customizable (add/delete/re-order).

There are three screen types available:

• Desktop (standard; resize the entire window to the specified resolution)
• Laptop/Notebook (same as Desktop, but different icon; makes it easier to scan the resolutions list)
• Mobile (different than the previous two; this applies the specified dimensions to the viewport, not to the entire window, because mobile browsers usually have no borders)

Your Turn

Do you use any of these extensions? Do you use other extensions for your web design and/or development? Which are your favorites and which do you use most often? Please share in the comments below.

Related posts:

1. 25 Free SEO Add-ons for Mozilla Firefox
2. 10 Ways To Increase Traffic By Changing Your Code
3. A Beginner’s Guide to Web Development