https://github.com/triumph-light/unplugin-react-inspector
A unplugin which provides the ability that to jump to the local IDE when you click the element of browser automatically.
https://github.com/triumph-light/unplugin-react-inspector
debug react react-inspector reactjs unplugin vite vite-plugin vscode
Last synced: 3 months ago
JSON representation
A unplugin which provides the ability that to jump to the local IDE when you click the element of browser automatically.
- Host: GitHub
- URL: https://github.com/triumph-light/unplugin-react-inspector
- Owner: Triumph-light
- License: mit
- Created: 2025-04-21T14:44:15.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-05-12T15:24:17.000Z (about 1 year ago)
- Last Synced: 2025-12-23T22:11:09.423Z (6 months ago)
- Topics: debug, react, react-inspector, reactjs, unplugin, vite, vite-plugin, vscode
- Language: TypeScript
- Homepage:
- Size: 413 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-react-next-inspector
[English](./README.md) | [简体中文](./README.zh-CN.md)
## Introduction
A unplugin which provides the ability that to jump to the local IDE when you click the element of browser automatically.
## Notice
now just support vite.
## Usage
```bash
npm i -D unplugin-react-next-inspector
```
Vite
```ts
// vite.config.ts
import Starter from 'unplugin-react-next-inspector/vite'
export default defineConfig({
plugins: [Starter()],
})
```
Rollup
```ts
// rollup.config.js
import Starter from 'unplugin-react-next-inspector/rollup'
export default {
plugins: [Starter()],
}
```
Rolldown
```ts
// rolldown.config.js
import Starter from 'unplugin-react-next-inspector/rolldown'
export default {
plugins: [Starter()],
}
```
esbuild
```ts
import { build } from 'esbuild'
import Starter from 'unplugin-react-next-inspector/esbuild'
build({
plugins: [Starter()],
})
```
Webpack
```js
// webpack.config.js
import Starter from 'unplugin-react-next-inspector/webpack'
export default {
/* ... */
plugins: [Starter()],
}
```
Rspack
```ts
// rspack.config.js
import Starter from 'unplugin-react-next-inspector/rspack'
export default {
/* ... */
plugins: [Starter()],
}
```
### Options
```ts
export interface InspectorOptions {
/**
* Default enable state
* @default false
*/
enabled?: boolean
/**
* Define a combo key to toggle inspector
* @default 'control-shift' on windows, 'meta-shift' on other os
*
* any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
* examples: control-shift, control-o, control-alt-s meta-x control-meta
* Some keys have native behavior (e.g. alt-s opens history menu on firefox).
* To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
* You can also disable it by setting `false`.
*/
toggleComboKey?: string | false
/**
* Target editor when open in editor
*
* @default process.env.LAUNCH_EDITOR ?? code (Visual Studio Code)
*/
launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'rider' | 'cursor' | string
include?: FilterPattern
exclude?: FilterPattern
}
```
### example
[Demo](https://github.com/Triumph-light/unplugin-react-next-inspector/tree/master/examples)
## 🔌 Configuration IDE / Editor
**Using the `launchEditor` option configuration to specify the IDE** (Please ensure that the editor's environment variables are correctly configured beforehand.)
It uses an **environment variable** named **`LAUNCH_EDITOR`** to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.
For example, if you want it always open VS Code when inspection clicked, set `export LAUNCH_EDITOR=code` in your shell and you must allow vscdoe check your files.
### VS Code
- install VS Code command line tools, [see the official docs](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)
- set env to shell, like `.bashrc` or `.zshrc`
```bash
export LAUNCH_EDITOR=code
```
### VS Code with WSL (Windows)
- add the configuration in the `settings.json`
- restart the VS Code (All Windows should be closed to take effect)
```json
{
// other config...
"terminal.integrated.env.linux": {
"EDITOR": "code"
}
}
```
### WebStorm
- just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)
```bash
export LAUNCH_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'
```
**OR**
- install WebStorm command line tools
- then set env to shell, like `.bashrc` or `.zshrc`
```bash
export LAUNCH_EDITOR=webstorm
```
### PhpStorm
- just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS)
```bash
export LAUNCH_EDITOR='/Applications/PhpStorm.app/Contents/MacOS/phpstorm'
```
**OR**
- install PhpStorm command line tools
- then set env to shell, like `.bashrc` or `.zshrc`
```bash
export LAUNCH_EDITOR=phpstorm
```
### Vim
Yes! you can also use vim if you want, just set env to shell
```bash
export LAUNCH_EDITOR=vim
```
## Credits
This project is inspired by [react-dev-inspector](https://github.com/zthxxx/react-dev-inspector) .
Partially implementation is inspired by [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main) .
## License
[MIT](./LICENSE) License © 2025-PRESENT [Triumph-light](https://github.com/Triumph-light)