40 Useful Google Chrome Extensions For Web Designer


I love Google Chrome. Its simplicity, speed and performance are top notch, undoubtedly. But sometimes, being too simple is also a problem, especially for us web designers who rely heavily on Firefox addons like Web Developer. I walked away from Chrome, yeah, just because it had no addon back in 2008.

google chrome extensions 40 Useful Google Chrome Extensions for Web Designers

But now, everything changes again. It has no surprise that other geeks are having the same love to Chrome and they decided to create Chrome Extension, which has similar function to Firefox Addon. I digged into those extensions and was very satisfied to them, therefore I decided to pick up 40 extensions which is extremely helpful for web designers and share with you guys.

So here they are for you, gear your Chrome and boost your productivity up.

Color

ColorPicker

Just as its name, ColorPicker is a convenient extension created mainly to pick and get color’s value from anywhere on the web page. Additionally, you can pick an area then click on the color palette to see how the area’s color changes without touching any code.

colorpicker 40 Useful Google Chrome Extensions for Web Designers

Chrome Palette

Having headache on finding color scheme from image? Chrome palette solves your problem efficiently by create up to 64 color palettes from website’s image for your design or inspiration needs.

chrome palette 40 Useful Google Chrome Extensions for Web Designers

Colour Tweaker

Colour Tweaker can modify the color of the website as Color Picker does, but with a more specific method. Just input the CSS selector on this extension then tweak the color of the text, background and border color to your will.

colour tweaker 40 Useful Google Chrome Extensions for Web Designers

Typography

Font Editor

No more guessing and tiring program switching, Font Editor allows you to modify and observe fontsetting like size, line height and variant lively.

font editor 40 Useful Google Chrome Extensions for Web Designers

Google Font Previewer

As specified in its name, this extension allows you to preview font from Google Font Directory with text styling options which are size, style, weight and shadows. If you are satisfied with particular font, you can copy and paste the link and the CSS code provided in the extension to your website’s code to use the font.

google font previewer 40 Useful Google Chrome Extensions for Web Designers

Development

Web Developer

Probably the must-have extension for web designer and developer. From viewing script to display object information, Web Developer aims to provide every piece of information you need from an existing website. The extension is also armed with useful tools like color picker, window resizer, validator, etc.

web developer 40 Useful Google Chrome Extensions for Web Designers

Pendule

Lightweight and handy developer tool that’s similar to the Web Developer, but only equipped with necessary tools like style viewer, source viewer and validator.

pendule 40 Useful Google Chrome Extensions for Web Designers

Firebug Lite

Different from what it is in Firefox, Firebug Lite offers Firefox-like visual representation when it comes to HTML elements, DOM elements and Box Model Sharing. It also comes with the ability to inspect HTML elements with your mouse, and you can edit CSS properties with this extension lively.

firebug lite 40 Useful Google Chrome Extensions for Web Designers

Stylebot

Stylebot grants you the ability to style any website directly without touching CSS code, which saves a lot of typing work. The best feature of this extension is probably its ability to generate CSS code for your use everytime you make a change to the website.

stylebot 40 Useful Google Chrome Extensions for Web Designers

CSSViewer

Tired of pushing ‘Inspect Element’ everytime you want to know what CSS style is applied to certain element? CSS Viewer helps you by display essential information such as font, color and positioning of the element lively.

cssviewer 40 Useful Google Chrome Extensions for Web Designers

Stylesheet Reloader

Reloads CSS stylesheet without refreshing entire website, which greatly saves your waiting time especially for designer with slow internet connection.

stylesheet reloader 40 Useful Google Chrome Extensions for Web Designers

BuiltWith Technology Profiler

The coolest part of this extension is it lists out every implemented web technology such as frameworks and web standard with very detailed information.

builtwith technology profiler 40 Useful Google Chrome Extensions for Web Designers

IE Tab Multi

Proved to be the most similar one to the original Internet Explorer, IE Tab Multi is your Internet Explorer within Chrome which supports tons of IE’s default feature like multi tabbing.

ie tab multi 40 Useful Google Chrome Extensions for Web Designers

Window Resizer

With Window Resizer, you can test your website’s screen resolution compatibility with standard or user-defined screen resolutions.

window resizer 40 Useful Google Chrome Extensions for Web Designers

HTML Validator

One of the best validator extension that can validate HTML code of online or localhost web page in either auto or manual mode. You can also choose to show the validation result in the web page or view it in a completely new tab.

html validator 40 Useful Google Chrome Extensions for Web Designers

Sight

With various theme and font options, Sight highlights the source code of the website into a more visually comfortable form.

sight 40 Useful Google Chrome Extensions for Web Designers

PHP Console

Being bugged by PHP erros but don’t know what and where it is? PHP Console assists you by display errors, exceptions and debug messages in notification form.

php console 40 Useful Google Chrome Extensions for Web Designers

JavaScript API Search

JavaScript API Search adds support to the Chrome Omnibox, or so called address bar to search for JavaScript functions online with autocomplete feature. If the extension cannot find the function you are searching for, it will further suggest you related searches from Google Codesearch, Development and Coding Search, and the Mozilla Developer Network search.

javascript api search 40 Useful Google Chrome Extensions for Web Designers

JQuery API Search

While jQuery has proven itself to be the leading Javascript library that improves user experience, jQuery API Search grants you the ability to search though jQuery API from Chrome Omnibox. Just type ‘jq’ followed by a space in omnibox, then you are on the go.

jquery api search 40 Useful Google Chrome Extensions for Web Designers

PHP Search

Similar to jQuery API Search, this extension adds support to your Chrome Omnibox to search PHP code for your reference use.

php search 40 Useful Google Chrome Extensions for Web Designers

Productivity

Stay Focused

Swored to keep yourself away from time wasting website but never did it successfully? Stay Focused acts as your virtual supervisor that blocks time wasting website for a specified time, and advises you seriously when you try to unblock or decrease the blocking time for the site. It’s also armed with crucial feature like nuclear option and challenge mode which kills your time wasting desire in a merciless manner.

stay focused 40 Useful Google Chrome Extensions for Web Designers

Speed Dial

Inspired from Opera browser, Speed Dial is a classic extension that changes the Chrome’s new tab into a predefined visual bookmarks with links and site thumbnails. You can even specify background theme and image to comfort your visual experience.

speed dial 40 Useful Google Chrome Extensions for Web Designers

PopChrom

With PopChrom, you can define your own shortcuts for text phrases, such as ‘ty’ for ‘thank you’. The activation key is needed to transform the abbreviation into the defined text phrases, so choose a key combination that does not crashes with other shortcut key.

popchrom 40 Useful Google Chrome Extensions for Web Designers

Quickrr Productivity Kit

Quickrr Productivity Kit provides you a bundle of basic yet useful tools such as translator, calculator, task-to-do, unit converter, etc.

quickrr productivity kit 40 Useful Google Chrome Extensions for Web Designers

Todoist

With an easy-to-setup account, you can access into this task manager to jot down and edit every task you need to complete. The best part of this extension is your tasks are stored online so you can access the task record on every Chrome with this extension installed.

todoist 40 Useful Google Chrome Extensions for Web Designers

Ananke Timer

Track your time spent on certain task, or record the time you spent on particular website. Ananke timer also supports multiple time tracking and allows you to browse though what you have tracked in past.

ananke timer 40 Useful Google Chrome Extensions for Web Designers

Chrome Toolbox

Created by Google, Chrome Toolbox brings you custom features like tab behavior modification, form data restoration and shortcut creation that launches predefined links from bookmark folder.

chrome toolbox 40 Useful Google Chrome Extensions for Web Designers

Chrome Page Extended

Nobody loves to click more to access certain page, Chrome Page Extended is your fastest shortcut to access all necessary Chrome page like Extensions.

chrome page extended 40 Useful Google Chrome Extensions for Web Designers

AppJump

With AppJump, you can organize and quickly launch Chrome application from browser toolbar.

appjump 40 Useful Google Chrome Extensions for Web Designers

Bookmark Bar Switcher

Too many bookmarks and failed to organize them efficiently? Boorkmark Bar Switcher allows you to create brand new bookmark bar and switch between them easily.

bookmark bar switcher 40 Useful Google Chrome Extensions for Web Designers

TabCloud

Save your windows sessions and restore them later on any computer with TabCloud, which saves you a lot of time from re-open different website from different part of bookmark folder.

tabcloud 40 Useful Google Chrome Extensions for Web Designers

Resourcing

Similar Pages

Developed by search engine giant Google, Similar Pages searches the web for similar web content that you are reading and interested to discover more.

similar pages 40 Useful Google Chrome Extensions for Web Designers

Universal Search

Resourcing or referencing are easier with Universal Search, which gives you an search box with option to search on Wikipedia, Bing and other search engines. The search box will also pop up when you highlight any text from the website you are currently viewing.

universal search 40 Useful Google Chrome Extensions for Web Designers

Awesome Screenshot

A totally awesome screenshot extension that captures any part of the website and annotate it with rectangles, circles, arrows, lines and text. You can then export the screenshot in PNG file format to your computer or web.

awesome screenshot 40 Useful Google Chrome Extensions for Web Designers

Clip To Evernote

Official extension by Evernote to capture and note your discovery on the web then upload to Evernote. The extension also supports the feature to search and synchronize your saved note.

clip to evernote 40 Useful Google Chrome Extensions for Web Designers

Diigo

Use Diigo to hightlight, annotate or post sticky notes privately or publicly to the web page so you can view it on anytime you reach to the web page.

diigo 40 Useful Google Chrome Extensions for Web Designers

Thinkery

Think Thinkery as your online brain, then save your link address and text selection into it for viewing later.

thinkery 40 Useful Google Chrome Extensions for Web Designers

MyNotes

Note taking should be an easy process, and it’s possible with myNotes which allows you to bookmark selected text with just one click on the context menu.

mynotes 40 Useful Google Chrome Extensions for Web Designers

Add To Google Bookmarks

Stumbled upon an interesting web page but don’t have time to read it? Just right click to bookmark the page into Google Bookmarks for enjoyment later.

add to google bookmarks 40 Useful Google Chrome Extensions for Web Designers

Microstock Photo Power Search

Probably the only search extension for you to look for high quality stock photo from famous agencies like Fotolia, Dreamstime and Shutterstock.

microstock photo power search 40 Useful Google Chrome Extensions for Web Designers

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: