Like Quertime on Facebook!

Top 50 of Useful Google Chrome Extensions for Web Designers, Developers, and Bloggers

Filed under Web Browsers

Two of the most powerful and widely used web browsers are Google Chrome and Mozilla Firefox, but which one do you think is more suitable to web developers and designers? We all know that one of the reasons that made Firefox so successful is the Firefox add-ons. What about Chrome? Other than simplicity and speed, Chrome also provides extensions which have similar function to Firefox addons.

best_google_chrome_extensions_for_web_designers_and_developers

In today’s post, we would like to show you more than 50 Chrome extensions which are extremely helpful for web designers, developers and bloggers. They are all selected based on our in-depth research on their usefulness and popularity. So, give them a try now to boost up your productivity and enhance your work’s competency. If you think of any other Chrome extension that is deserved to be listed in this post, please share with us in the comment section below.

Developer Tools

Firebug Lite for Google Chrome
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.

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.

Proxy Switchy!
Proxy Switchy! is an advanced proxy manager for Google Chrome, it allows users to manage and switch between multiple proxy profiles quickly and easily.

Session Manager
With Session Manager you can quickly save your current browser state and reload it whenever necessary. You can manage multiple sessions, rename or remove them from the session library. Each session remembers the state of the browser at its creation time, i.e the opened tabs and windows. Once a session is opened, the browser is restored to its state.

Alexa Traffic Rank
Alexa Traffic Rank is Alexa Internet’s free extension for Chrome, and is the only extension that includes you in Alexa’s traffic panel. The Alexa extension accompanies you as you surf, providing you with Alexa data about the sites you visit without interrupting your browsing.

Speed Tracer (by Google)
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.

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

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

StayFocusd
StayFocusd is a productivity extension for Google Chrome that helps you stay focused on work by restricting the amount of time you can spend on time-wasting websites. Once your allotted time has been used up, the sites you have blocked will be inaccessible for the rest of the day.

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

Aviary Screen Capture
This quick screen capture addon (codename: Talon) 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!

XML Tree
XML Tree displays XML data in a user friendly way.

YSlow
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page.
yslow

Edit This Cookie
Edit This Cookie is a cookie manager. You can add, delete, edit, search, protect and block cookies!

PageRank Status
PageRank Status shows Google PageRank and AlexaRank of current web page, quick access to Geo IP Location, Whois, Alexa, backlinks and indexed pages.

Pastebin.com
With this extension you can quickly paste any type of text to the website http://pastebin.com. The extension installs a small icon in your browser. When you highlight any text in Google Chrome and press the ‘Pastebin’ button, it will automatically paste the selected text into the textarea. When you press submit you will be presented with a unique URL where you can find your pasted text. You can customize the extension via the Options panel.

Stylebot
Stylebot allows you to quickly create and apply custom CSS to websites. It is very easy to use. You pick an element and choose any changes you want to make. You can change the font size, color, margins, visibility and a lot more. The advanced users can also write the CSS manually.

CSSViewer
CSSViewer shows the css parameters of any element in a web page, to enable/disable it simply click the toolbar icon and then hover any element on you want to inspect in the page.

csscan
The extension adds a button to the toolbar. Clicking this button will enable the extension; you can then continue using the page, with the difference that a quick overview of CSS properties for the element your mouse cursor is hovering is displayed. To disable the CSS scanner, simply click the icon again.

BuiltWith Technology Profiler
BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.

Google Font Previewer for Chrome
This extension lets you choose a font from the Google Font API directory, and apply that font to the entire page to see how it looks. Useful when you’re designing a website and want to quickly find a font that will look good.

code cola
code cola is a chrome extension for editing online pages. It enables visual desigers, interactive designer, operators and others to modify online pages’ css style visually.

PHP Console
PHP Console display PHP errors/debugs in Google Chrome console or by notification popups.

Color Generator
Color Generator lets you quickly generate custom Hex and RGB color values and adjust the Hue, Saturation, and Brightness.

Sight
Sight is the Syntax Highlighter Chrome extension that makes reading code on the browser a joy. You can choose the theme and font on the options page.

Productivity

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

Speed Dial
Speed Dial for Chrome – replace Chrome new tab with your predefined visual bookmarks.
speed_dial

Clip to Evernote
The Evernote Chrome Extension is the best way to remember all of the great stuff you see online. Forget about bookmarks and open tabs, save the actual web page–text, links, images and all with a single click.

LastPass
LastPass is a free online password manager and Form Filler that makes your web browsing easier and more secure. You can import from most major password storage vendors (such as RoboForm, 1Password, KeePass, Password Safe, MyPasswordSafe, Sxipper, TurboPasswords, Passpack, Firefox and Internet Explorer’s built-in password manager) and export too.

TooManyTabs for Chrome
TooManyTabs for Chrome manages your tabs, improves your browsing, and maintains your sanity when you have many tabs open.

Chrome Toolbox (by Google)
A quick access tool that allows you to put your favorite browser commands in one drop down menu, save unsubmitted form data, magnify images, view videos in standalone windows, and define shortcuts to open all links in any bookmark folder.

Chrome IE Tab Multi
IE Tab Multi is a most similar to original IE, Internet Explorer behavior. You can see IE only site without leaving Chrome and you can run ActiveX controls.

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. Version detecting is being implemented.

Web Clipboard (by Google)
This extension will allow you to use the Google Web Clipboard to store text and HTML content. It uses Google Docs web clipboard, so you can access all your data directly in any Google Apps!

iMacros for Chrome
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. You can keep the macros on your computer for your own use, use them within bookmark sync / Xmarks or share them with others by embedding them on your homepage, blog, company Intranet or any social bookmarking service as bookmarklet.

Window Resizer
This extension re-sizes the browser’s window in order to emulate various resolutions. It 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).

TabCloud
Tab Cloud allows you to save any window session and restore it at a later date or on another computer. Effectively allowing you to sync open tabs between multiple computers. To use you simply click the TabCloud icon on the menu, you will then see your current open windows and previously saved windows, you can save open windows, or restore saved ones. You can also delete previously saved windows.

Ajax Animator
A html5 powered web-based animation suite. Its original goal was to be a usable Flash IDE alternative, but has evolved into a cross-platform/cross-format animation tool. Works offline.

Lorem Ipsum Generator
This is an extension that generates random “Lorem Ipsum” text.

Blogging

Awesome Screenshot: Capture & Annotate
Awesome Screenshot lets you capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click upload to share. Support PNG and shortcuts.
awesome_screenshot

Webpage Screenshot
Fast&Simple extension to capture the whole webpage. Even long pages are saved in one image file. This extension lets you save PNG/JPG image of any webpage. Just one click.

bit.ly | a simple URL shortener
bit.ly shorten, share, and track your links, right from your browser.

Diigo Bookmark, Archive, Highlight & Sticky-Note
Diigo is an extension for annotating, archiving and bookmarking webpages.

Chrome Flags
The extension displays a country flag indicating the physical location of the websites you’re visiting. It also provides access to detailed information regarding the website’s servers, owners, traffic and trustworthiness.

Create Link
Create Link lets you copy current page URL to clipboard in various formats.

Instapaper
This extension lets you add the current page to your Instapaper List.

Search Tools

Google Similar Pages beta (by Google)
This extension lets you discover webpages similar to the page you’re currently browsing.

SEO Site Tools
This extension is one of the most comprehensive SEO Tools on any browser. It does not only pull more metircs from more sources, including social media reactions, it also enhances common tools like Yahoo Site Explorer and Google Webmaster tools with links anchor text and pagerank. Even nofollow link hilighting, popout ability, color themes, and more.

PHP documentation – PHP.net
PHP documentation, the official PHP Manual for developpers.

AppJump App Launcher and Organizer
This extension lets you quickly launch apps from browser toolbar, organize apps and extensions into groups and manage apps and extensions with ease.

Universal Search & IE8 Accelerators
Universal Search is the missing search tool for chrome, includes searchbox with suggestions, highlight search and IE8 accelerators

Utility

Sketchpad
MugTug Sketchpad brings your favorite digital painting tools to the browser with a tool set including paintbrush, texture stamp, and spiral brush.

Aviary Feather
Aviary’s simple photo editor (Feather) is a revolution in quick and easy photo editing! With just a few clicks, anyone with an internet connection can edit a photo into a beautifully layered piece of art or perform a series of simple touch ups.

Pixlr Editor
Pixlr presents a full featured photo editor direct in your browser, no download, and it’s free.
pixlr_editor

Author: Jules, Quertime Editorial

Founder of Quertime.com. Connect with him on Facebook, follow him on Twitter or circle him on Google+.

Tags: , , ,

Comments are closed.