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.
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.
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.
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.
Image Downloader
See all images shown or linked on a web page and download them.
Awesome Screenshot
Capture the whole page or any portion, annotate it with rectangles, circles, arrows, lines and text, blur sensitive info, one-click.
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.
PageSpeed Insights (by Google)
PageSpeed Insights analyzes the performance of your web pages and provides suggestions to make them faster.
Responsive Inspector
Responsive Inspector allows inspecting page media queries.
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.
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.
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.
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.
useful extension…
I love the measuring extension!
Great list of extensions. I’d also recommend this for easier responsive design testing. https://chrome.google.com/webstore/detail/browser-width/mlnegepkjlccabakompdmbcmdieaideh