🧩手把手开发一个 Vue DevTools 插件：实现组件状态实时追踪（附完整源码）

一、你想开发 Vue 插件？那就必须认识 DevTools 插件机制

Vue DevTools 不只是个调试工具，它其实支持第三方插件扩展，你完全可以：

• 在 DevTools 中新增一个标签页（tab）
• 实时显示你定义的组件数据
• 和现有 Vue 组件交互、收集调试信息

今天我们就动手写一个最小可用的 DevTools 插件，目标是：

🌟 实现组件状态追踪面板，显示任意组件的实时状态（props、state）

---

二、插件目录结构一览

我们将使用 @vue/devtools-api 提供的插件 API，快速实现功能。

my-devtools-plugin/
├── main.js               # 插件注册逻辑
├── devtools-panel.js     # DevTools UI 面板
├── index.html            # 用于本地开发的组件沙盒（非必需）

---

三、安装依赖并准备开发环境

npm init -y
npm install @vue/devtools-api

---

四、核心代码：注册 DevTools 插件并挂载面板

📄 main.js

import { setupDevtoolsPlugin } from '@vue/devtools-api'

setupDevtoolsPlugin(
  {
    id: 'com.example.state-tracker',
    label: '状态追踪',
    packageName: 'my-devtools-plugin',
    homepage: 'https://github.com/your/repo',
    app: window.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps[0],
    logo: 'https://your-logo-url.com/icon.png',
  },
  (api) => {
    // 添加一个新的标签页
    api.addTimelineLayer({
      id: 'state-tracker',
      label: '组件状态追踪',
      color: 0x42b983,
    })

    // 监听组件更新事件
    api.on.inspectComponent((payload, ctx) => {
      const { instanceData } = payload

      // 拿到组件 props 和 state
      instanceData.state.push({
        type: '状态追踪',
        key: '状态详情',
        editable: false,
        value: {
          props: payload.instance.props,
          data: payload.instance.data,
        },
      })
    })
  }
)

---

五、调试效果展示

🚀 启动 Vue 应用后打开 DevTools，你将在右侧看到新增的“状态追踪”标签页，点击任意组件即可查看实时状态数据！

这是我们的插件效果：

• ✅ 支持所有组件
• ✅ 实时更新 props 和 state
• ✅ 不影响原有 DevTools 使用体验

---

六、插件还能干什么？

你可以扩展以下功能：

功能	简介
自定义事件收集	监听组件内部事件，如点击、请求、emit 等
自定义性能分析	跟踪组件更新耗时
状态快照保存与对比	保存组件状态做 diff
配合 Vuex、Pinia 等展示数据流	可视化状态流转

---

七、实战 Tips：如何在 Vue 项目中注入调试数据

配合插件，在业务组件中你可以这样写：

import { devtoolsLog } from '@vue/devtools-api'

onMounted(() => {
  devtoolsLog('组件挂载完成', {
    props: props,
    state: state,
  })
})

你也可以在 Vue 插件中为所有组件自动注入这些 hook。

---

八、总结一句话：写 Vue 插件不难，关键是你敢迈出第一步

Vue DevTools 提供了完整的插件 API，文档也非常清晰。

你不需要深入源码，只需搞清楚两个核心函数：

• setupDevtoolsPlugin —— 插件入口
• api.on.inspectComponent —— 监听组件状态

其余的，就看你的想象力了。