By AN Jay on July 13, 2010

13 Google Chrome Extensions To Simplify Web Designer’s Life

Don't Forget to participate in a contest where you can win an amazing e-Commerce template from TemplateMonster.

  Advertisement

You might have been using Chrome for a quite some time now but there is a good chance you are not taking its full advantage. Chrome’s maximum potential lies in the power of its extensions. Below We have gathered 13 Chrome extensions that will enable you all to realize Chrome’s full potential if you are a web design expert. You will not find these extensions in similar lists on other websites; I hope you find them to be useful to your computer usage.

Give the list a thorough reading, try out any extension you are interested in, and let me know in the comments how they worked out for you. You are welcome to share if you know more useful chrome extension which our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com just subscribe to our rss feed and you can follow us on twitter.

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

Chrome Editor

With this extension, you can edit HTML easily, right inside your browser. You also have the ability to save a code reference for later use. It saves it to your computer locally.

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 as well as a custom option for you to input your own.

Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools. It is designed for Google Chrome and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

BuiltWith

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. The BuiltWith Chrome Extension lets you find out what a website is built with by a simple click on the builtwith icon.

MultiSwitch

Whenever you have the need to simply switch between development, test and productive hosts you should use MultiSwitch. You are now able to customize the title of your environment.

Inline Code Finder

Inline Code Finder is a tool to traverse through all elements in a web page, and when it finds a HTML element with any of these, it will highlight them: Inline JavaScript events, Inline style, javascript: links.

IE Tab

IE-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

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.

CSSViewer

CSSViewer shows the css parameters of any element in a web page, to enable/disable
it simply click the toolbar icon.

Aviary Screen Capture

This quick screen capture addon is a must-have for designers. 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.

Lorem Ipsum Generator

Chrome Extension that generates random “Lorem Ipsum” text. It uses a minimalist and well looking design. Many other extensions of this type – in other browsers – simply complicate this task, using really extensive code, XHR, etc. The main purpose of this one, is to use the less amount of code (and also memory) and help the developer/user to get the job done.

JavaScript tester

This extension adds a small & usefull shortcut to your browser “Alt+J”. To run and test pefromance of JavaScript code. When you press “Alt+J”, new textarea is added to the bottom of the current page. In this textarea you can write your JS code and press “Ctrl+Enter”, to run the code.





If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

Wow I didnt realize there was so much stuff out there for Chrome!

Lou
http://www.privacy-tools.es.tc

I know it’s not as well developed as the equivalent Firefox extension, but I still would have thought Firebug Lite would have made the cut

[...] with ActiveX controls, and users who want to use the explorer view for local files.Read More : 13 Google Chrome Extensions To Simplify Web Designer’s LifeWindows Memory DiagnosticMicrosoft has its own memory testing tool and it is called Windows Memory [...]

Sorry, the comment form is closed at this time.