As web designers and developers, we all know how difficult it can be to work with sites every day that have different content management systems and themes. In order to get a grip on things, we need to use the tools at our disposal. Luckily, there are a ton of free extensions for Google Chrome that make our lives a bit easier.

Page Ruler

You can use this extension to measure the width, height, and margin of any element on your webpage.

CSSViewer

With this extension, you can hover over elements on any website to view the CSS being used.

Check Broken Links

looking for broken links on your web pages can get annoying. This solves that issue.

Perfmap

Perfmap shows you a heat map of individual elements on your webpage based on their load timing.

Visual Inspector

This extension allows designers to make changes to the design of the site without coding. They are just temporary changes made on the page itself.

Web Developer Checklist

This checklist shows you some of the very basic elements that your webpage may or may not have, such as microdata, HTML validation, accessibility, and page speed to name a few.

ColorZilla

ColorZilla is the ultimate color tool for web designers. It doesn’t just pick the colors like other color tools. It also has a palette viewer, gradient generator, and it analyzes your webpage to give you a list of all the colors you’re using.

MagiCSS

This extension allows you to edit the CSS on any webpage in real time.

Window Resizer

This resizer extension allows you to resize your webpage to fit iPhones, tablets, and multiple desktops.

Conclusion

I hope you found some of these tools to be helpful. Personally, I use the window resizer every 10 seconds.

Let us know if you use any other awesome, time-saving tools!