Seamless browser-to-editor code navigation.
Inspect in browser, click, then you will get its source code in your local IDE, instantly.
Simple to integrate with
your React frameworks and Editors
It's quick and easy to get started with some built-in plugins for most popular React frameworks.
Prefer an online demo?
Okay, it's also supported on StackBlitz, CodeSandbox, Gitpod, Replit, GitHub Codespaces and other remote Cloud IDEs.
That's how it works
Inject JSX Source
The compiler's plugin records source path info into component's react fiber.
The Inspector Component
The <Inspector/> component reads the source info, sends it to the dev-server when you inspect elements on browser.
Dev Server Middleware
The dev server middleware receives source path info from API, then call your local IDE/Editor to open the source file.
Try now, at once.
Yes, you can try the react-dev-inspector immediately on this page by the button below!
And more...
Examples / Configuration / Built-in Plugins / API / Fully Controlled Usages ...
A lot of new possibilities to be explored.