DEV Community

Cover image for Best Chrome Extensions for Web Development
Rithik Samanthula
Rithik Samanthula

Posted on

Best Chrome Extensions for Web Development

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.

Alt Text

Alt Text

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.

Alt Text

Alt Text

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!

Alt Text

Alt Text

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.

Alt Text

Alt Text

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

Alt Text

Alt Text

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.

Alt Text

Alt Text

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

That's All for this blog.

Thank You For reading and remember...

Keep Coding Y'All 👨🏻‍💻

Top comments (9)

Collapse
 
danmann profile image
Dan Manning • Edited

Nice article! Thanks! I've been using Window Resizer for a while and wanted to add my 2 cents:

  1. I also use the GQL developer tools extension
  2. Tabion is another great tabs manager extension
Collapse
 
mahmoudessam profile image
Mahmoud EL-kariouny

Hello Dan Manning, and welcome! I'm thrilled to have you here with us

Collapse
 
danmann profile image
Dan Manning

Thank you!

Collapse
 
liamedwards profile image
Liam Edwards

Good list! #2 is built in to Vivaldi (a great Chromium browser that you should all use) and #3 is built in to basically every browser nowadays but other than that, there's some good extensions here that I'm going to have to try out.

If you're going to include React Developer Tools though, you should include identical extensions for similar frameworks:

Collapse
 
rubyrubenstahl profile image
Ruby Rubenstahl

I second thevote for Vivaldi. I dabbled with a bunch of browser for a while but I've found that I really am in love with Vivaldi, both as a developer and as a general user.

Collapse
 
liamedwards profile image
Liam Edwards

I had used Chrome since it's first release up to around 8 months ago when I made the switch. I can't even remember what provoked it but I can never go back. Mouse gestures alone have me for life.

Collapse
 
therickedge profile image
Rithik Samanthula

Sure, I will include it

Collapse
 
mahmoudessam profile image
Mahmoud EL-kariouny

This an excellent article, thanks! Please continue to write.

Collapse
 
adamagid profile image
Adamagid

Please, I need help on how I can create an extension for my news channel