Why React Dev Inspector

The Problems

Hey folks, have you ever run into any of these issues 🤔:

• You've got to fix some bugs in your team's project, but you have no idea where the heck page/component's code is located.
• You're eager to dive into an open-source project that interests you, but it's hard to find where the code for the page/component is implemented.
• You may thinking about a component and want to quickly peek at its code, but don't want to memorize or manually expand those never-ending deep file paths.

That's exactly why react-dev-inspector was created.

React Dev Inspector

react-dev-inspector is the tool for seamlessly code navigation from browser to IDE.

With just a simple click, you can jump from a React component on the browser to its source code in your local IDE instantly. Think of it as a more advanced version of Chrome's Inspector.

It's designed to work in any environment:

• no browser restrictions, no framework limitations.
• doesn't matter whether your code is running locally, remotely, or even in a container.
• also flexible enough to handle both development and production build modes.

It's not just built for app, also designed to be integrated into tools you developed or ready to develop, like browser extensions and developer toolkits.

Quick Look

Just check out this demo below and you'll get it in a snap.

Try It Online

Wanna try out the demo right now? Sure, here is the online demo:

(opens in a new tab)

How to Use and Configure

According to the working pipeline below, the Part.1 and Part.2 are what you need configure to use.

Basically, it's includes:

1. add the <Inspector/> component in your page
2. integrate the middleware in your framework's dev-server

Check their documentation link for details.

How It Works

Here is the working pipeline of react-dev-inspector: