jump to local IDE code directly from browser React component by just a simple click

文件	最后提交记录	最后更新时间
.github	docs: replace demo preview gif to video	2 年前
.husky	chore: init `@stylistic` for eslint via `@antfu/eslint-config`	1 年前
.vscode	build(eslint): optimize jsonc/comma-dangle config	2 年前
docs	polish: format all files by ESLint Stylistic	1 年前
examples	polish: format all files by ESLint Stylistic	1 年前
packages	polish: format all files by ESLint Stylistic	1 年前
scripts	docs: refactor README of project index and packages, ready for release docs site	3 年前
.commitlintrc.yml	WIP: prepare for gen elements acestor chain from inspector	2 年前
.editorconfig	build: upgrade react version, fix building, update docs details-summary	4 年前
.gitattributes	docs: add simplest description of the InspectContextPanel - convert images track by git-lfs	2 年前
.gitignore	feat: init ContextPanel components and storybook	2 年前
.npmrc	refactor(beta): use monorepo for plugins packages, update examples TODO: - pipeline for publish and CI - icejs plugin - update docs	3 年前
.pnpmfile.cjs	ci: try to fix build in Vercel with Nodejs v18	2 年前
.stackblitzrc	feat: add config support of stackblitz	3 年前
LICENSE	docs: update README for preview	5 年前
README.md	release: update version to 2.1.0-beta.10, update README	2 年前
eslint.config.mjs	chore: adjust eslint stylistic rules, ready to format all files	1 年前
package.json	chore: init `@stylistic` for eslint via `@antfu/eslint-config`	1 年前
pnpm-lock.yaml	chore: init `@stylistic` for eslint via `@antfu/eslint-config`	1 年前
pnpm-workspace.yaml	WIP: init docs site with nextra	3 年前

React Dev Inspector

Introduction

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

Why React Dev Inspector

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.

Quick Look

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:

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:

Check the Documentation Site for more details

How It Works

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

0. Inject JSX Source

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.

1. Inspector Component

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.

2. Dev Server Middleware

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.