25 Most Useful Chrome Extensions for Web Developers

I have been avid user and admirer of firefox because of the host of extensions that it has to offer, But, in the last few years chrome has gained a lot of users and already took over firefox in terms of usage. Even i have started using Chrome for a few of my projects. The rise of chrome could easily be attributed to the speed with which it opens and the less that it puts on the system. But, for many web developers and designers the success is attributed to the host of chrome extensions and apps that are being developed and put to proper use.

Extensions are used to change the overall behaviors of the whole browser. It could applied to all the websites and tabs that you open. Extensions play with the core of the browser and help developer find out how some of the complex website around the web are being built. Many developers also use chrome extensions to optimize their own web pages and also load times of their websites. In this post we are publishing 25 Most Useful Chrome Extensions for Web Developers and Designers. Hope these might help you to get the most out of the browser and help you improve your web development ability!

In the meanwhile you may want to read some of our browser related articles

 

IPvFoo

Summarizes IPv4, IPv6, and HTTPS information for all connections made by the current webpage.

chrome_Extension1

jQuery Debugger

Comfortably inspect your jQuery selectors, and watch their matching elements displayed on any website. This extension is designed to help you understand easily even the most complex selectors.

chrome_Extension2

PerfectPixel by WellDoneCode

This extension allows developers to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them. Analogue of popular Firefox extension PixelPerfect.

chrome_Extension3

jquery-injector

Click on the toolbar and have jQuery injected into the current page. You can check for successful insertion, by running “jQuery” command in javascript console.

chrome_Extension4

PageEdit

Transform your browser into a WYSIWYG HTML editor.

chrome_Extension5

Wappalyzer

Wappalyzer is a browser extension that uncovers the technologies used on websites. It detects content management systems, web shops, web servers, JavaScript frameworks, analytics tools and many more.

chrome_Extension6

PageSpeed Insights (by Google)

The PageSpeed Insights browser extensions, available for Chrome and Firefox, allow you to evaluate the performance of your web pages and to get suggestions on how to improve them.

chrome_Extension7

Web Developer

The Web Developer extension adds a toolbar button to the browser with various web developer tools.

chrome_Extension8

Adobe Edge Inspect

Adobe Edge Inspect (formerly Adobe Shadow) is for web designers and developers who are targeting mobile browsers.

chrome_Extension9

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. This could be used when developing responsive websites!

chrome_Extension10

Color Picker

This extension may not yet work as expected on the mac, you will have to use the pop-out button to put the preview in it’s own window.

chrome_Extension11

Tape

Tape is a tool for pixel-perfect website development. It lets you put down guides that snap intelligently to the page content (and stick to it if it moves on scroll or resize), and helps you easily measure positions and sizes of elements. It knows about borders and padding, and will even snap to the baseline of text.

chrome_Extension12

Image Properties Context Menu

A simple context menu extension to show the properties of an image.

chrome_Extension13

Firebug Lite

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

chrome_Extension14

ruul Screen ruler

A fantastically simple on-screen ruler for lining up and measuring type, line height, strokes and just about anything on the web.

chrome_Extension15

IE Tab

Display web pages using IE within Chrome. Supports ActiveX controls, Sharepoint, ICBC, alipay.

chrome_Extension16

Pendule

chrome_Extension17

Search by Image (by Google)

This extension allows you to initiate a Google search using any image on the web. This extensio is developed by the Google Images team.

chrome_Extension18

WhatFont

The easiest way to identify fonts on web pages.

chrome_Extension19

Form Editor

An extension for editing custom request(GET or POST) to web server.

chrome_Extension20

Check My Links

Check My Links is a link checker that crawls through your webpage and looks for broken links. Great for SEO purposes

chrome_Extension21

colorPicker 0.9

Pick color from current web page or change color(s) of any element in DOM.

chrome_Extension22

Awesome Screenshot

Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click…

chrome_Extension23

XML Tree

Displays XML data in a user friendly way.

chrome_Extension24

Dr.Web Anti-Virus Link Checker

Scans HTML links with Dr.Web Online Anti-Virus using a context-menu item. Autoscans Facebook, Vk.com, Google+ Social Network links.

chrome_Extension25

I am an SEO personal & web developer. Movies and cricket are my inspiration to whatever i do Love to get involved into anything new that is on the web. you could get in touch with me and follow me on twitter .

Amit – who has written posts on Artatm - Creative Art Magazine.


No Responses to “25 Most Useful Chrome Extensions for Web Developers”

Leave a Reply