Useful Chrome Extensions for Web Development

No doubt Google Chrome is the best browser ever, it is even better for Web Development. With the built-in Chrome DevTools it is easy to inspect any website. To add more web development features to Chrome, I’ve compiled a list of Useful Chrome Extensions for Web Development, check them out!

Web Developer

Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.

webdeveloper

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. There is on-screen help, the ability to display user-defined column and row grids, a built-in magnifying glass for pixel-perfect measurement, and all guides can be quickly toggled on and off with a single keystroke.

tape

WhatFont

What is the easiest way to find out the fonts used in a webpage? Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant.

whatfont

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.

ruul

Image Downloader

See all images shown or linked on a web page and download them.

imagedownloader

Awesome Screenshot

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

awsomescreenshot

Evernote Web Clipper

Use the Evernote extension to save things you see on the web into your Evernote account. It even lets you search through your notes.

evernote

PageSpeed Insights (by Google)

PageSpeed Insights analyzes the performance of your web pages and provides suggestions to make them faster.

pagespeed

Responsive Inspector

Responsive Inspector allows inspecting page media queries.

responsive inspector

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

User-Agent Switcher for Chrome

Spoofs & Mimics User-Agent strings. With this extension, you can quickly and easily switch between user-agent strings. Also, you can set up specific URLs that you want to spoof every time.

useragentswitcher

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.

speedtracer

RescueTime for Google Chrome

Keep track of the time you spend in your browser, and get a clear picture of what you were doing all day.

rescuetime

3 thoughts on “Useful Chrome Extensions for Web Development

Leave a Reply