Useful Chrome Developer Tools

Here I have come with some list of useful chrome developer tools which can be helpful specially for web developers or web designers. You can download these extensions on chrome website.

Redux DevTools

Redux DevTools for debugging application’s state changes. The extension provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state.

ModHeader

Add, modify, and remove request and response headers. Use ModHeader to set X-Forwarded-For, Authorization, Access-Control-Allow-Origin, etc. Modify cookies in request / response header. Redirect URL with another.

Checkbot: SEO, Web Speed & Security Tester

Checkbot is a powerful website testing tool that tells you how to improve the SEO, page speed and security of your website. Test SEO/speed/security of 100s of pages in a click! Check broken links, HTML/JavaScript/CSS, URL redirects, duplicate titles.

Visual CSS Editor

The extension allows you to customize any website without coding. Click on an element and start visual editing. Adjust colors, fonts, sizes, positions, and a lot more. Take full control over your website’s design with more than 60 style properties.

Lipsum Generator

Generate lorem ipsum dummy text.

CSS Selector Capture Pro

Generate a copiable CSS Selector with a mouseover without Devtool

ColorZilla

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies.

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.

Dimensions

A tool for designers to measure screen dimensions. This extension measures the dimensions from your mouse pointer up/down and left/right until it hits a border. So if you want to measure distances between elements on a website this is perfect.

GitHub Web IDE

Open GitHub repositories in online web IDE. This extension adds to any GitHub repository a new drop down menu which offers links to a number of online services that allow viewing the source code of the repository in an IDE like interface.

Fix translation

Control Google Translate areas, customize translation or non-translation areas. Google Translate usually translates all content, but sometimes parts of the content do not need to be translated, such as: code, terminology, name, … etc.

React Developer Tools

Adds React debugging tools to the Chrome Developer Tools.

Please like share and give positive feedback to motivate me to write more.

For more tutorials visit my website.

Thanks:)
Happy Coding:)