Web developers and designers are using more Google chrome than Mozilla Firefox. Well, things change, so the Google chrome. The new Google chrome version is in beta, while Firefox 4.0 public release date is near. Anyway, Below we have the list of Google chrome Extensions that will help the Web Designers and Developers in their work.

1. View Selection Source

View selection source in resizable popup. Drag the bottom right corner to resize. Simple, but very useful for web developers

View Selection Source is definitely a handy extension for developers and designers. It will save you time when you want to see the style used for only a section.

view-selection-source-chrome-extension

Resolution Test2. Resolution Test

An extension for developers to test web pages in different screen resolutions, with an option to define your own resolutions
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,

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

The BuiltWith Chrome Extension lets you find out what a website is built with by a simple click on the builtwith icon!

BuiltWith technology tracking includes widgets (snap preview), analytics (Google, Nielsen), frameworks (.NET, Java), publishing (WordPress, Blogger), advertising (DoubleClick, AdSense), CDNs (Amazon S3, Limelight), standards (XHTML,RSS), hosting software (Apache, IIS, CentOS, Debian)

BuiltWith Technology Profiler

4. Chrome Editor

This extension allows you to code right within the browser.

You also have the ability to save a code reference for later use. It saves it to your computer locally.

I have predefined basic code to get you started coding the following.
HTML 4 DTD

HTML 5 DTD

Adobe Flash Embed

Jquery Funtions

CSS

Chrome Editor

5. Chrome Sniffer

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.

Currently, this extension can detect up to 50 popular CMS and javascript libraries, and more will be added in future releases. Visit extension website for more detail.

6. Speed Tracer

Speed TracerSpeed 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).
Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by:
* Javascript parsing and execution

* Layout

* CSS style recalculation and selector matching

* and more …

7. Pendule

Extended web developer tools for Chrome.

Use this extension in addition to the built-in Developer Tools (Ctrl+Shift+I).

Pendule

8. Aviary Screen Capture

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.

This quick screen capture addon 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!

9. CSS Reloader

CSS Reloader is an extension that allows you to reload all the CSS of any site without you have to reload the page itself.
To use this extension just press F9, and the loaded stylesheets will reload.

Very useful especially when you do pixel pushing.

Note: This version does not support local files, due to Google’s review-process. If this extension should support file:// urls it takes months to get it approved.

10. Instant Image Editor

Simply right-click any image or element on a web page with a background image while holding down the alt key to edit the image instantly in a new tab.

The editor is Pixlr, a fast, easy-to-use app that runs in the browser!
http://pixlr.com/

This will not work in the chrome extension gallery itself, since Chrome disables extensions within the gallery. Also, it may not work on existing tabs immediately after installing until the tab is reloaded.

The background image editing feature is experimental and may not work every time. This will be improved in future versions! 🙂

For techies, notice that Instant Image Editor itself uses no memory in the task manager. No background memory usage means no possible memory leaks!

We will create another list in next few months, So Let us know if we missed something in the list and don’t forget to subscribe to our feeds.

This extension allows you to code right within the browser.  

You also have the ability to save a code reference for later use.  It saves it to your computer locally.  

I have predefined basic code to get you started coding the following.

HTML 4 DTD
HTML 5 DTD
Adobe Flash Embed
Jquery Funtions
CSS

3 thoughts on “10 Chrome Extension For Web Developers & Freelancers”

  1. Pendule? ahh, I will have to give it a try. I am currently using the Web Developer extension and it is ok. Honestly what’s missing right now are:
    DNS fusher, JSView, and the DNS Flusher extensions from FireFox…

Leave a Reply

Your email address will not be published.