kimi-plugin-inspect-react

轻量的 Vite 插件，用于在 React 组件渲染的 DOM 上写入源码位置信息，便于在浏览器里定位到对应的文件和行列。

安装

pnpm add kimi-plugin-inspect-react -D
# 或 npm/yarn 均可

使用

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

export default defineConfig({
  plugins: [
    // 方式一：直接在 JSX 上插入 code-path 属性
    inspectAttr(),

    // 方式二：通过 ref 在真实 DOM 上写入 $codePath 属性
    // inspectDom(),
  ],
})

默认仅在 vite serve 生效（apply: "serve"），构建时不会影响产物。

导出

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

支持 ESM .mjs 与 CJS .cjs，并提供类型声明。

本地开发与构建

pnpm install
pnpm run build

产物输出到 dist/，包括：

• inspectAttr.mjs / inspectAttr.cjs 及类型声明
• inspectDom.mjs / inspectDom.cjs 及类型声明

版权与许可

本项目基于以下开源项目改进而来（保留原声明）：

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

本项目同样以 MIT License 授权。