为什么我的react项目启动后，dom上的类名里没有代码位置信息

最近在写一个新的 React 项目，打开浏览器开发者工具，发现个有意思的事：之前团队一起写的项目在 Elements 面板里，每个 DOM 元素都带着一堆 data-component-* 属性，能直接看到是哪个文件的哪一行代码。而这个我自己新起的项目就只有普通的 HTML 标签。

这到底咋回事？是不是有什么调试神器？

React 的 DOM 为啥看不到组件名？

先说个基础知识：React 组件最终会被编译成普通 HTML。你在 Elements 面板看到的是真实 DOM，不是 React 的虚拟 DOM。

比如这个组件：

jsx 复制代码

function MyButton() {
  return <button className="my-btn">Click me</button>;
}

浏览器里只会看到：

html 复制代码

<button class="my-btn">Click me</button>

组件名 MyButton 根本不会出现在 DOM 里，因为它只是个 JavaScript 函数，最后返回的就是这个 button 元素。

那些能看到组件信息的项目是怎么做到的？

看了别人的项目代码，发现都用了 Vite 调试插件。这类插件会给每个 React 元素注入调试属性：

html 复制代码

<div
  data-inspector="src/pages/HomePage.tsx:42:7"
  class="container"
>
  <!-- 内容 -->
</div>

属性格式是 文件路径:行号:列号，一眼就能看出组件来源。

更强大的是，有些插件还支持点击页面元素直接跳转到 VS Code 源码！这才是真正的效率神器。

解决方案：vite-plugin-react-inspector

vite-plugin-react-inspector 是专门为 Vite + React 项目设计的调试工具，功能强大且易用。

安装

bash 复制代码

pnpm add -D vite-plugin-react-inspector
# 或
npm install -D vite-plugin-react-inspector

配置很简单

在 vite.config.ts 里添加：

typescript 复制代码

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import Inspector from 'vite-plugin-react-inspector';

export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    // 只在开发模式启用
    mode === 'development' &&
      Inspector({
        toggleButtonVisibility: 'always',
        toggleComboKey: 'alt-shift',
      }),
  ].filter(Boolean),
}));

配置说明：

toggleButtonVisibility: 'always' - 始终显示检查器按钮
toggleComboKey: 'alt-shift' - 使用 Alt+Shift 快捷键激活
mode === 'development' - 生产环境自动禁用

实际效果

启动开发服务器后，在浏览器里看到的 DOM：

html 复制代码

<div data-inspector="src/pages/HomePage.tsx:42:7">
  <!-- 内容 -->
</div>

属性格式是 文件路径:行号:列号，一眼就能看出来源。

然后复制在vscode搜索，直接就跳转到源码位置了。

仓库地址

vite-plugin-react-inspector - GitHub 仓库，查看完整文档