Useful Chrome Developer Tools
Tags: webdev, beginners, tutorial, chrome
Published: 2022-05-17 21:55:50

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](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
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](https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj)
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](https://chrome.google.com/webstore/detail/checkbot-seo-web-speed-se/dagohlmlhagincbfilmkadjgmdnkjinl)
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](https://chrome.google.com/webstore/detail/visual-css-editor/cibffnhhlfippmhdmdkcfecncoaegdkh)
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](https://chrome.google.com/webstore/detail/lipsum-generator/fepopmflofkppphpkfjdbmimglkeifna)
Generate lorem ipsum dummy text.

## [CSS Selector Capture Pro](https://chrome.google.com/webstore/detail/css-selector-capture-pro/cpnkcffhllafbdbljkmhebnpbnlhapmd)
Generate a copiable CSS Selector with a mouseover without Devtool

## [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies.

## [Window Resizer](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh)
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](https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj)
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](https://chrome.google.com/webstore/detail/github-web-ide/adjiklnjodbiaioggfpbpkhbfcnhgkfe)
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](https://chrome.google.com/webstore/detail/fix-translation/nefkkabmejdacaifhjoinegmoggdbgee)
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](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
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](https://www.w3courses.org/tutorials/).

Thanks:)
Happy Coding:)