Vue DevTools v9 双宿主架构与仓库开发指南：一套 Kit、一个 Client、两种宿主（Vite 插件与 Chromium 扩展）-北京尧图网络

【免费下载链接】devtools-next⚙️ Devtools for debugging Vue.js applications.项目地址https://gitcode.com/gh_mirrors/de/devtools-next点击查看免费下载本文以仓库根目录 AGENTS.md 为核心骨架面向想要理解 Vue DevTools v9 仓库结构、参与开发或配置使用的开发者。读完本文你将掌握v9 版本一套运行时kit 一套 UIclient 两个宿主Vite 插件与 Chromium 扩展的整体架构vueDevTools()与 Vitedevtools配置的正确分工Chrome MV3 扩展的加载方式以及从安装依赖到提交 PR 前的完整开发工作流。文中的源码证据均可在当前仓库对应路径中核对。总体定位两个宿主共享一套 Kit 与一个 ClientVue DevTools v9 的核心设计可以概括为一句话两个宿主host共享一个运行时 Kit 和一个客户端 UI。Vite 插件vite-plugin-vue-devtools作为 Vite DevTools 内部的 dock停靠面板运行本身不提供独立的 DevTools 外壳而是寄生在 Vite DevTools 的共享外壳中。Chromium 扩展vue/devtools-chrome拥有自己独立的 DevTools 面板不经过 Vite在任何运行 Vue 的页面上都可以工作包括那些从不加载 Vite DevTools 的应用。二者共享的底层能力来自两个包vue/devtools-kitvue/devtools-client—— 共享运行时与 UI覆盖组件树、状态、时间线timeline、Pinia、页面pages、响应式图reactivity graph以及 v6 插件 APIsetupDevToolsPlugin别名setupDevtoolsPlugin。值得注意的是 v9 对插件能力边界做了明确切分详见 packages/devtools-api/src/index.ts其中setupDevToolsPlugin与setupDevtoolsPlugin是同一导出:属于 Vite 生态层的能力——自定义标签页custom tabs、命令commands、分屏split screen、浮动 inspector 按钮——只在多个 Vite 工具共享同一 UI 时存在因此归 Vite DevTools 管Vue 层面保留的addCustomTab/addCustomCommand在两个宿主上均已移除属于 Vue 插件层的能力——自定义 inspector、组件钩子component hooks、时间线层timeline layers、插件设置plugin settings——继续保留在 Vue 插件 API 上。此外devframe/devframes/hub其文档站为 devfra.me只在 Vite 路径上起作用dock、命令、终端、消息等均依赖该 hub扩展路径不使用这个 hub。在改动 dock、命令或 open-in-editor 行为之前应当先阅读同级仓库../vite-devtools的 AGENTS.md本仓库仅引用该路径实际目录位于本仓库之外的vite-devtools仓库中。技术栈与仓库结构构建基础Vue DevTools v9 采用pnpm workspace monorepo、ESM TypeScript库包使用 tsdown 打包并仅发布 ESM发布包要求 Node 22.12见 packages/kit/package.json 的engines字段构建本仓库要求Node 22.x 需 22.18、24.x 需 24.11、或 26pnpm 固定为12.6.0packageManager字段见 package.json版本统一管理所有依赖版本集中在 pnpm-workspace.yaml 的catalog:中并配套overrides各包入口使用catalog:引用。例如vite目录为^8.3.1、vitejs/devtools为^0.7.6这与 AGENTS.md 中Vite 插件要求 Vite 8.3.0 和项目级vitejs/devtools的描述一致。包清单目录npm 包名职责说明packages/kitvue/devtools-kit运行时、codec、RPC、插件注册表。只导出dist见 packages/kit/package.json 的exports字段packages/devtools-apivue/devtools-api面向插件的公开 API 层薄薄地架在 kit 之上packages/clientvue/devtools-clientVue 3 UnoCSS 的 UI两个宿主共用。私有包Vite 插件把构建产物复制进packages/vite/client扩展面板加载同一份 clientpackages/vitevite-plugin-vue-devtoolsVite 宿主serve 静态 client并向vitejs/devtools注册 iframe dockpackages/chromevue/devtools-chromeChromium MV3 宿主background、content backend、DevTools 面板。私有包用pnpm zip:chrome打包其他顶层目录docs/—— VitePress 文档站迁移指南位于 docs/guide/migration.mdplayground/basic——vue/devtools-playground-basic基础 playgroundplayground/reactivity-graph—— 响应式图追踪器 playgroundtests/—— 单元、集成、性能以及 smokeVite Chrome测试。依赖关系图AGENTS.md 用 Mermaid 给出了包级依赖方向这里原样保留以说明kit 是底座、client 被两个宿主共享的关系可以看到vue/devtools-kit同时被 API 层、client、Vite 插件与扩展依赖vue/devtools-client被 Vite 插件和扩展两个宿主共享而 Vite 插件一路向上经过vitejs/devtools与devframes/hub到达 devframe —— 这条 Vite 专有链路正是扩展路径所不具备的。依赖边界Dep Boundary什么该归 Vite什么该归 Vuev9 最容易被忽略、也最容易踩坑的规则是配置与功能的归属边界Vite 宿主上dock、命令、终端、open-in-editor 全部留在vitejs/devtools。open-in-editor 通过vite:core:open-in-editor转发并由capabilities.openInEditor开关控制扩展面板不提供 open-in-editor该动作只存在于 Vite dock 中。插件选项分工vueDevTools()的选项只有enabled和appendTodock 布局、内置集成、open-in-editor 都属于 Vite 的devtools配置而运行时budget性能预算是 kit 的选项。这一边界在源码中清晰可见packages/vite/src/options.ts 中VitePluginVueDevToolsOptions接口只有enabled与appendTo两个字段packages/vite/src/index.ts 中vueDevtools()入口在enabled为假时直接返回空数组否则返回两个子插件——client 注入插件与 dock 注册插件。也就是说插件本体只负责把 Vue DevTools 装进 Vite 环境而 dock 长什么样、内置哪些工具全部由宿主对象说了算。架构关键点挂载路径是两套不同的端点Vue client 挂在{base}__devtools__/而 Vite DevTools hub 挂在/__devtools/二者不能混为一谈RPC 通道命名扩展使用vue-devtools:chrome-extensionVite dock 保持默认的vue-devtools通道这样两者可以同时安装而不冲突。扩展的通道常量定义在 packages/kit/src/rpc/channels/extension.tsDEVTOOLS_EXTENSION_PORT_SOURCE vue-devtools端口名通过 JSON 序列化的 descriptor含source、version、role、tabId在页面与面板之间协商状态归属组件状态存放在vue/devtools-kitclient 只负责渲染。isComputedRef只有一份实现位于packages/kit/src/codec如果在state.ts里再复制一份会破坏 client 的构建——这是仓库里明确的单一实现约束。扩展侧的架构还可以从 packages/chrome/src/content/backend.ts 进一步印证content backend 在页面上调用createDevtoolsKit({ clientName: chrome-extension })创建 kit 并kit.install()随后通过startExtensionPageRpcHost以vue-devtools:chrome-extension通道桥接面板并利用apps:changed订阅、指数退避的检测调度初始 100ms翻倍封顶 5000ms最多 10 次向 popup 发布 Vue 检测结果。配套的 packages/chrome/manifest.json 展示了 MV3 声明两个 content scriptbackend 运行于MAINworld、detector 运行于默认 isolated world、document_start、all_frames、devtools_page、scripting权限等。使用指南Vite 插件方式依赖安装devDependency 需要vite-plugin-vue-devtools外加vite^8.3.0与vitejs/devtools版本目录见 pnpm-workspace.yaml。最小配置import { defineConfig } from vite import vueDevTools from vite-plugin-vue-devtools export default defineConfig({ devtools: { apply: serve, }, plugins: [vueDevTools()], })devtools: { apply: serve }让 Vite DevTools 宿主只在开发阶段启动与 Vue 仅限开发的集成方式保持一致只有当你希望构建build阶段也运行宿主时才用devtools: true。进阶配置dock 布局与内置工具放在宿主对象上而不是vueDevTools()上export default defineConfig({ devtools: { apply: serve, builtinDevTools: false, embeddedVisibility: passive, dockPreferences: { defaultMode: edge, defaultPosition: bottom, }, }, plugins: [ vueDevTools({ enabled: true, // 适用于没有 Vite HTML 入口的应用。 // 字符串按解析后路径的末尾匹配正则同理。 appendTo: [resources/js/app.ts, /\/entry\.client\.m?js$/], }), ], })参数说明结合 packages/vite/src/options.ts 的实现enabled是否安装 Vue DevTools 并注册 Vite DevTools dock 条目默认true设false时vueDevTools()直接返回空插件数组不产生任何副作用appendTo默认空。对没有 Vite HTML 入口的应用如 Laravel 的resources/js/app.ts、Remix/SolidStart 风格的entry.client.ts(x)等 SSR 入口把早期 Vue hook 安装 import 追加到指定模块而非注入 HTML。类型为string | RegExp | Arraystring | RegExp字符串按解析路径的结尾匹配正则直接匹配完整路径builtinDevTools/embeddedVisibility/dockPreferences属于 Vite 宿主对象vitejs/devtools的选项控制内置工具、嵌入可见性与 dock 默认布局不属于本插件budget运行时性能预算属于 kit 选项不在插件选项中。启动开发服务器后打开运行中的应用进入Vite DevTools → Vue即可使用Vue client 位于{base}__devtools__/。宿主相关选项以 Vite DevTools 官方文档devtools.vite.dev/guide为准本插件不重复实现。Chromium 扩展方式发布版Chrome以及通过同一 listing 安装的其它 Chromium 浏览器从 Chrome 网上应用商店安装即可AGENTS.md 中提供了商店详情页地址。加载本地构建版先构建扩展包pnpm --filter vue/devtools-chrome build在 Chrome 扩展管理页以加载已解压的扩展程序方式加载本仓库的packages/chrome目录如需打包pnpm zip:chrome会写出dist/devtools-chrome.zip打包逻辑见 scripts/chrome-extension-zip.mjs打开目标页面进入Chrome DevTools → Vue面板。扩展面板不要求devtools: true也不要求安装 Vite 插件——它是完全独立的宿主任何运行 Vue 的页面都能接入其检测能力甚至覆盖 Nuxt 与 VitePress 站点见 packages/chrome/src/content/backend.ts 对__NUXT__、__VITEPRESS__、__VUE__的检测。开发工作流仓库根 package.json 定义了完整的脚本入口AGENTS.md 给出的常用命令如下pnpm i pnpm build # 先构建 client再构建 vite-plugin-vue-devtools后者会复制 client/dist pnpm play # 启动 playground/basic —— 需要先构建 kit、client 与 Vite 插件 pnpm play:reactivity-graph pnpm test # vitest run pnpm test:unit pnpm test:integration pnpm lint # vp lint pnpm format # vp fmt pnpm typecheck # vue-tsc针对 client 项目 pnpm docs # VitePress 文档站两个关键注意点构建顺序pnpm build的实质是先构建除vite-plugin-vue-devtools外的所有包再构建插件本身见 package.json因为插件构建需要复制 client 的产物改动后的重构建当修改了 kit、client 或插件、且需要 playground 生效时执行pnpm --filter vue/devtools-kit --filter vue/devtools-client --filter vite-plugin-vue-devtools build其它补充命令pnpm test:smoke:vite与pnpm test:smoke:chrome会各自构建所需包后再跑 smoke 测试分别见 package.jsonsmoke 测试文件位于 tests/smoke/vite-client-injection.test.ts 与 tests/smoke/chrome-extension.test.tspnpm dep:up通过 taze 升级 catalog 中的依赖版本pnpm zip:chrome打扩展 zip 包。提交 PR 前的检查清单pnpm lint pnpm test pnpm typecheck pnpm buildAGENTS.md 将 lint、测试、类型检查、构建四步串联为提交前的最小门禁仓库还通过simple-git-hooksnano-staged见 package.json在 pre-commit 阶段自动跑 lint 修复与格式化。文档写作规范AGENTS.md 末尾给出了适用于docs/下所有 Markdown 的写作约定同样值得贡献者在写文档时遵守只描述产品当下的行为版本新增能力交由 release notes 承载now supported 属于 release notes默认用平实叙述 [!WARNING]只保留给安全风险、易踩坑的 footgun 与破坏性变更的陷阱凡是介绍如何打开 Vue DevTools的页面必须同时覆盖两个宿主Vite 插件vueDevTools()vitejs/devtools与 Chromium 扩展只属于 Vite 宿主的 API 链接到 Vite DevTools 官方文档而不是在本仓库重复复述开头用一句话说明页面用途每个目标只需一个交叉链接即可避免链接泛滥。小结Vue DevTools v9 的仓库设计始终围绕一条主线运行时与 UI 下沉到共享的 kit 与 client两个宿主各司其职。Vite 插件借助vitejs/devtools生态获得 dock、命令与 open-in-editor 等宿主能力配置上严格区分插件选项enabled / appendTo与宿主选项dock 布局等Chromium 扩展则以 MV3 的独立面板形式服务所有 Vue 页面。本文梳理的架构边界、配置用法与开发命令都可在 AGENTS.md 及文中列出的源码路径中逐一核对作为后续参与开发或排查问题的起点。赞分享【免费下载链接】devtools-next⚙️ Devtools for debugging Vue.js applications.项目地址https://gitcode.com/gh_mirrors/de/devtools-next点击查看免费下载相关推荐agents 仓库聊天恢复基础收敛实录:两个 Chat 宿主如何共享一套恢复引擎agents 仓库聊天恢复基础收敛实录:两个 Chat 宿主如何共享一套恢复引擎这篇文章解读 agents 仓库中「共享聊天恢复基础」RFC 的存档进度日志AI AgentAgent 框架后端云原生MCP 服务实时通信Wox 单文件 SDK 插件开发指南一个文件、完整 Public API、常驻宿主进程Wox 单文件 SDK 插件开发指南一个文件、完整 Public API、常驻宿主进程单文件 SDK 插件Single file SDK Plugin是桌面应用AI 应用插件系统diagram-design 多宿主插件发布架构ADR 0008 单一插件根与同步版本门禁实践diagram design 多宿主插件发布架构ADR 0008 单一插件根与同步版本门禁实践 Diagram Design 同时服务 Claude CodeAI 技能数据可视化上一篇list.js安全最佳实践防止XSS攻击的方法下一篇RuCaptcha 核心功能解析从 Rust 性能到安全防护创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Vue DevTools v9 双宿主架构与仓库开发指南：一套 Kit、一个 Client、两种宿主（Vite 插件与 Chromium 扩展）

相关推荐

Apache Beam Pipeline 配置指南：从命令行参数到 PipelineOptions 的完整实践

OpCore-Simplify 使用指南：3 步自动生成黑苹果 OpenCore EFI

DirectX 12 n-body 引力模拟实战：基于 DirectX-Graphics-Samples 的多引擎异步计算与跨队列 Fence 同步

更多资讯

SAP平行分类账实战：一套凭证多准则记账与对账避坑指南

AI教材课后答案结构化处理实战指南

Taroify PullRefresh实战：移动端下拉刷新踩坑与性能优化

Agent-Reach CLI实战：Python构建AI Agent的本地触达与并发优化

Java进阶必学：日期处理、包装类与正则表达式的实战避坑指南

同步整流与异步整流：Buck电源效率与选型深度解析

今日更新

Multisim仿真NE555 PWM控制器：从搭电路到调占空比全流程

S32K312 AUTOSAR BSW开发实战：从配置踩坑到烧录交付

双目视觉三维人脸重建：从视差图到点云粗配准全流程解析

本周精选

CMOS设计三大物理效应：体效应、沟道长度调制与亚阈值导电

微信小程序在线阅读毕设全解析：Java后端+MySQL+避坑实战

Android音频问题五层分析法：从App到Codec的系统化诊断

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？