plugin-inspect-react-code

plugin-inspect-react-code

A lightweight Vite plugin that writes source code location information onto the DOM rendered by React components, so you can jump to the corresponding file and line in the browser.

Installation

pnpm add plugin-inspect-react-code -D
# or npm / yarn

Usage

import { defineConfig } from 'vite'
import { inspectAttr, inspectDom } from 'plugin-inspect-react-code'

export default defineConfig({
  plugins: [
    // Option 1: Inject code-path attribute directly on JSX
    // <div code-path="/src/aaa.jsx:12:11"></div>
    inspectAttr(),

    // Option 2: Write $codePath on real DOM via ref
    // <div></div>    div.$codePath is '/src/aaa.jsx:12:11'
    // inspectDom(),
  ],
})

The plugin runs only during vite serve (apply: "serve"); it does not affect the production build output.

Exports

• import { inspectAttr } from 'plugin-inspect-react-code'
• import { inspectDom } from 'plugin-inspect-react-code/inspectDom'

ESM (.mjs) and CJS (.cjs) are supported, with type declarations.

Local development and build

pnpm install
pnpm run build

Output goes to dist/, including:

• inspectAttr.mjs / inspectAttr.cjs and type declarations
• inspectDom.mjs / inspectDom.cjs and type declarations

License

This project is derived from the following open-source projects (original notices retained):

• @namnode/vite-plugin-inspect-react (MIT License - Copyright (c) 2024 Nam Nguyen)
• vite-plugin-react-inspector (MIT License)

This project is also licensed under the MIT License.