jump to local IDE code directly from browser React component by just a simple click
MIT License
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.
See the document on: https://react-dev-inspector.zthxxx.me
Have you ever run into any of these issues 🤔:
That's exactly why react-dev-inspector was created.
Just check out this demo below and you'll get it in a snap.
Showcase: https://react-dev-inspector.zthxxx.me/showcase
screen record:
Wanna try out the demo right now? Sure, here is the online demo:
According to the working pipeline below, the Part.1 and Part.2 are what you need configure to use.
Basically, it's includes:
Check the Documentation Site for more details
Here is the working pipeline of react-dev-inspector
:
The compiler's plugin
records source path info into React components during development stage.
Note: The 0 of Part.0 implies that this section is generally OPTIONAL. Most React frameworks offer this feature out-of-the-box, which means you usually don't need to manually configure it additionally.
The react-dev-inspector provide a <Inspector/>
component to reads the source info,
and sends it to the dev-server when you inspect elements on browser.
The react-dev-inspector provide some middlewares for dev-server in most frameworks to receives source path info from API, then call your local IDE/Editor to open the source file.
Thanks for @zthxxx @sonacy @sl1673495