Skip to content

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

License

Notifications You must be signed in to change notification settings

nkkko/react-dev-inspector

This branch is up to date with zthxxx/react-dev-inspector:dev.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

1ab6935 · Jul 8, 2024
May 1, 2024
May 1, 2024
Jul 7, 2024
Jun 30, 2024
Jun 30, 2024
May 2, 2024
May 11, 2023
Dec 23, 2023
Jun 5, 2022
Apr 27, 2024
Jun 30, 2024
May 1, 2024
Apr 3, 2024
Sep 24, 2022
Dec 11, 2023
Mar 1, 2023
Sep 14, 2020
May 2, 2024
Jul 7, 2024
May 2, 2024
Mar 4, 2023

Repository files navigation

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:

inspector.mp4

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

Open in StackBlitz


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 the Documentation Site for more details


How It Works

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

Working Pipeline


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.



Articles about it



License

MIT LICENSE

Thanks for @zthxxx @sonacy @sl1673495

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 89.2%
  • JavaScript 6.3%
  • Less 3.1%
  • Other 1.4%