Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zthxxx/react-dev-inspector

jump to local IDE code directly from browser React component by just a simple click
https://github.com/zthxxx/react-dev-inspector

dev fiber inspector react react-inspector

Last synced: 2 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
React Dev Inspector





  NPM Version

  NPM Downloads

  Node.js

  License




## 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:



[

  ![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)

](https://stackblitz.com/edit/github-x3rkzl?file=package.json,vite.config.ts%3AL17)







## How to Use and Configure



According to the working pipeline [below](#how-it-works), the **Part.1** and **Part.2** are what you need configure to use.



Basically, it's includes:

1. [add the `` component in your page](https://react-dev-inspector.zthxxx.me/docs/inspector-component)

2. [integrate the middleware in your framework's dev-server](https://react-dev-inspector.zthxxx.me/docs/integration)



Check the [Documentation Site](https://react-dev-inspector.zthxxx.me/docs) for more details







## How It Works



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



[

  ![Working Pipeline](https://github.com/zthxxx/react-dev-inspector/raw/dev/docs/images/working-pipeline.svg)

](https://react-dev-inspector.zthxxx.me/docs#how-it-works)







### 0. Inject JSX Source



The compiler's [`plugin`](https://react-dev-inspector.zthxxx.me/docs/compiler-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 [``](https://react-dev-inspector.zthxxx.me/docs/inspector-component) 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](https://react-dev-inspector.zthxxx.me/docs/integration) for dev-server in most frameworks to receives source path info from API,

then call your local IDE/Editor to open the source file.







---



## Articles about it



- [Chinese] [🎉 我点了页面上的元素，VSCode 乖乖打开了对应的组件？原理揭秘](https://juejin.cn/post/6901466406823575560)







---



## License



[MIT LICENSE](./LICENSE)



> Thanks for @zthxxx @sonacy @sl1673495