Want to know some cool chrome extensions for Web Development?

Well, here's the list.

Without any other further ado, let's get right into it.

1. React Developer Tools

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

You will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler".

The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.

By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and so on.

2. Debug CSS

Adds outline to all elements on the page to show the culprit element which is changing the desired layout.

This chrome extension allows user to see outline on every element of the page. Hold the keyboard Ctrl button and hover element it will show the element details along with the value.

3. 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.

The resolutions list is completely customizable (add/delete/re-order).

You can set the window's width/height, window's position, preset icon (phone, tablet, laptop, desktop) and even the option to apply the new dimensions to the entire window or just to the viewport.

The extension also features customizable global key shortcuts, an option to export your settings and import them on another computer and more!

4. Web Developer Checklist

As the name of the extension indicates, this tool will help you to discover problematic areas in your newly created website. It will analyze each web page and check whether there has been a violation of best practices and will report it to the developer.

5. JSON Viewer Pro

A completely free extension to visualise JSON response in awesome Tree and Chart view with great user experience and options. ✅…
A completely free extension to visualise JSON response in awesome Tree and Chart view with great user experience and options.

✅ Completely Free and no advertisements.

Core features:

✅ Beautify JSON response from API
✅ Visual representation of JSON with Chart
✅ Depth traversing of JSON property using breadcrumbs
✅ Write custom JSON in Input area
✅ Import local JSON file
✅ Download JSON file using Context Menu
✅ URL filters
✅ Change Themes
✅ Custom CSS
✅ Cool User Interface.
✅ Copy property and value
✅ Access JSON in your console using only json keyword

6. What Runs?

Discover what runs a website. Frameworks, Analytics Tools, Wordpress Plugins, Fonts - you name it.
WhatRuns extension is one click away for you to find technologies used on any website you visit. From Developer Tools and Ad Networks to Wordpress Plugins and Themes, we detect even the new and upcoming tools and services.

Not just that - you can follow websites so that you get notified when they use new technologies or remove existing ones.

--------------------------------x--------------------------------------

That's All for this blog.

Thank You For reading and remember...

Keep Coding Y'All 👨🏻‍💻