While Chrome’s Dev Tools gives you a plethora of utilities that covers most of your design and development requirements, but adding extensions you can extend the browser functionality even further with these free to use chrome extensions.
Depending on your needs, and by selecting the perfect extension combination, you can easily create a your own personalise working environment that can greatly improve your productivity. Here are 12 essential and favourite Chrome extensions.
1. Color Tab
Color Tab is a refreshing extension by Color Hunt that serves you a beautiful color palette each time you open a new tab.
2. Website Analysis by Pagelocity
Website Analysis by Pagelocity is a Chrome extension providing the user with a free report for any given web page. It offers basic information like social media metrics, resources composition, on-page SEO and HTML/CSS insights.
3. Scratch JS
This extension is an add-on for DevTools which integrates both the Traceur and Babel transpilers, allowing you to test out the new JS features coming with ECMAScript 6, also known as ES6 or ES2015. It also supports CoffeeScript, LiveScript and more compile-to-JS languages will be added soon.
4. Check My Links
‘Check My Links’ is an extension developed primarily for web designers, developers and content editors.When you’re editing a web page that has lots of links, wouldn’t it be handy to be able to quickly check that all the links on the page are working ok? That’s where ‘Check My Links’ comes in.’Check My Links’ quickly finds all the links on a web page, and checks each one for you. It highlights which ones are valid and which ones are broken, simple as that.
5. Postman Interceptor
Postman Interceptor helps you send requests which use browser cookies through the Postman app.It can also send headers which are normally restricted by Chrome but are critical for testing APIs. The Interceptor makes this process painless. Something that would have required a proxy earlier can now be achieved without any installation steps or extra configuration.
6. Quick SEO
Quick SEO is a very fast and easy to use SEO tool to analyze SEO metrics. It provides you easy access to important SEO signals and data like PageRank, Backlinks, Alexa Rank and Traffic estimate.
7. 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.
8. Window Resizer
This extension re-sizes the browser’s window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.
9. Marmoset
Marmoset is a Chrome App which lets you create gorgeous code snapshots within seconds.
10. CSS Shack
CSS-Shack is a web and desktop application, which allows you to create layers styles (just like you would in any other image editing software), and export them into a single CSS file.
11. Booom
Booom makes Dribbble.com faster and easier to use, by adding many highly requested.
12. DomFlags
DomFlags chrome extension offers a new way to interact with the DevTools. For the first time ever, you can now create keyboard shortcuts to DOM elements.DomFlags are like bookmarks for navigating the DOM tree. They help you track and navigate to important elements so styling can be a breeze. The extension has auto-inspect features that help you re-engage elements with pinpoint accuracy to speed your DevTools flow.
