15 Essential Google Chrome Extensions for Web Developers and Designers

The arrival of Google Chrome in late 2008 led many web developers and designers to consider switching from Firefox, their industry standard browser. Most have stayed loyal to Firefox, however, and with good reason. It takes a long time to create a browser environment that you feel comfortable with and at home in. Getting the right balance of plugins, of which there are lots more available for Firefox than Chrome, is an evolutionary process which takes a long time.

Google Chrome is fast and secure. With it’s support for extensions, it becomes easy for developers and web designers to multi-task within the browser. Following are some useful Google Chrome extensions which can be handy for web developers and designers.

1. Web Developer

The Web Developer extension 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 written by the same person.

Web Developer

Detail

2. Speed Tracer

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.

Speed Tracer

Detail

3. Pendule

Pendule displays linked and embedded style sheets of the current page in a new tab. It reloads the style sheets for the current page on the fly, so you don’t have to reload the whole page for each change, and also disables CSS for the current page.

Pendule

Detail

4. SEO Site Tools

This extension provides you with on-page external metrics, social media information, page rank / numbering on Yahoo, Bing, Google search engine result pages.

SEO Site Tools

Detail

5. Eye Dropper

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.

Eye Dropper

Detail

6. MeasureIt!

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

MeasureIt

Detail

7. Lorem Ipsum Generator

Simple but very effective, this extension is of use to all web designers, giving them instant access to an easy-to-use lorem ipsum generator. The extension has been designed to simplify things as much as possible, using less code, which is not only less confusing, but uses less memory.

Lorem Ipsum Generator

Detail

8. View Selection Source

This extension provides you with a re-sizable pop-up to view selection source. It’s very simple, but handy for web developers.

View Selection Source

Detail

9. 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.

PlainClothes

Detail

10. 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.

Aviary Screen Capture

Detail

11. IE Tab

Use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome. Great for web developers who want to test the IE rendering engine, users who use sites with ActiveX controls, and users who want to use the explorer view for local files (i.e. file:// URLs).

IE Tab

Detail

12. Resolution Test

With this lightweight extension, developers can change the size of their browser window to test their sites at different screen resolutions. You can choose from a list of common resolutions or specify your own. All you need to do is click the resolution test icon in the top right of the browser, choose resolutions, and press “View all selected”.

Resolution Test

Detail

13. Csscan

This Chrome extension allows you to easily scan an element’s basic CSS properties without having to explore through the inspector window.

Csscan

Detail

14. 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.

Validity

Detail

15. Snippy

Snippy allows you to grab snippets of web pages, save them for future use and upload them to Google Docs.

Snippy

Detail

You may also be interested to quench your knowledge about Mozilla Firefox Addons for web developers, designers and bloogers.

One thought

Comments are closed.