【免费下载链接】devtools-next⚙️ Devtools for debugging Vue.js applications.项目地址https://gitcode.com/gh_mirrors/de/devtools-next点击查看免费下载Vue DevTools 是专门面向 Vue.js 应用的调试与开发工具本文以仓库入口文档docs/index.md为骨架系统讲解它的项目定位、核心功能面板、三种接入方式Vite 插件、浏览器扩展、独立应用、v9 版本配置与插件扩展 API并结合仓库源码如 packages/vite、packages/kit验证底层实现。读完本文你将能根据项目形态选择正确的接入方案完成 v9 配置与迁移并掌握通过插件 API 扩展 DevTools 的方法。一、认识 Vue DevTools项目定位与核心价值仓库入口文档 docs/index.md 是 VitePress 站点的主页配置它用一句话概括了项目的使命Unleash Vue Developer Experience——释放 Vue 开发者体验。围绕这一使命主页提炼出四个核心价值主张Developer experience开发者体验通过实时编辑、时间旅行调试、深度检视等能力显著提升 Vue 应用开发与排错效率Multiple ways to use DevTools多种接入方式可以选择 Vite 插件也可以选择浏览器扩展适配不同的工作流Extensible可扩展通过插件 API 将你自己的库集成进 Vue DevToolsComponent Wizard组件检视查看组件节点树、组件状态以及组件之间的关系。这四个特性块正是整个项目的四条主线后续章节将逐一展开第二、三章讲开发者体验与组件检视的功能细节第四章讲多种接入方式第五、六章讲可扩展性。二、为什么选择 Vue DevTools四大核心能力结合 docs/getting-started/introduction.mdVue DevTools 之所以值得进入每个 Vue 3 开发者的工具箱主要源于以下能力Live Editing Properties实时编辑属性直接在 DevTools 中修改组件的属性/状态页面立即反映变化无需重启应用或手动改代码非常适合快速验证Time Travel Debugging时间旅行调试可以查看 store如 Pinia在任意时间点的状态追踪状态随时间的变化定位 Bug 的引入时机Vue Router 集成查看路由列表与路由详情Pinia 集成将应用发出的所有事件收集到统一位置监控自定义事件来源组件、名称、体积、payload辅助识别性能瓶颈。此外功能全景 还覆盖了性能时间线、响应式依赖图等能力具体见下一章。三、功能全景十二个核心面板逐个解读features.md 按面板列出了 DevTools 的全部功能这里完整梳理面板用途Overview快速概览应用信息Vue 版本、页面数、组件数Pages列出路由支持输入路径查看匹配的路由Components组件树与状态可编辑状态值、滚动定位到页面组件Timeline性能事件时间线含组件渲染与更新的耗时Router集成 Vue Router展示路由与详情Pinia集成 Pinia展示 stores 并支持编辑其状态Graph展示所选组件的响应式依赖关系Settings自定义 DevTools 外观与行为Inspect仅 Vite借助 Vite DevTools 查看模块被 Vite 转换后的结果Inspector仅 Vite组件定位器激活后在页面点选元素反查其所属 Vue 组件Command Palette命令面板导航面板、执行命令、打开 Vue 文档Multiple App Support多应用切换同一页面存在多个 Vue 实例时在左上角切换几个值得注意的操作细节Command Palette按CtrlKWindows/Linux或CmdKmacOS打开Inspectorv9 变更Vue DevTools v9 把组件检视内建到 Vite DevTools 的 dock 中无需单独安装旧版component-inspector插件详见 docs/guide/migration.md多应用支持仅当应用使用多个 Vue 实例时左上角才会出现切换器。从源码结构看这些面板与 packages/client/src/pages 下的页面组件一一对应components.vue、timeline.vue、pages.vue、graph.vue、settings.vue、overview.vue等而 packages/kit/src/runtime/handlers如components.ts、inspectors.ts、router.ts、timeline.ts则负责在应用运行时收集并响应这些面板的数据请求。四、三种接入方式按项目形态选择入口文档强调Choose the Vite plugin or browser extension to fit your workflow。仓库在 docs/getting-started/installation.md 中提供了完整的选择指南实际上有三种接入路径。4.1 Vite 插件官方推荐如果项目使用 Vite官方推荐 Vite 插件方案因为它能解锁 Inspect、Inspector、Open in Editor 等附加能力。安装与配置详见 docs/guide/vite-plugin.md本章第五节会给出 v9 的完整配置。4.2 浏览器扩展Chrome / EdgeArc、Brave 等 Chromium 系浏览器从 Chrome Web Store 安装 Vue DevTools 扩展即可使用详见 docs/guide/browser-extension.md兼容性注意Vue DevTools v7 只支持 Vue 3Vue 2 应用请使用 v6 扩展。扩展的工程实现位于 packages/chrome其中manifest.json声明扩展结构packages/chrome/src/backgroundport-router.ts、tab-state.ts负责 DevTools 面板与页面之间消息端口的路由与标签页状态管理packages/chrome/src/contentdetector.ts、bridge.ts、backend.ts负责在页面侧检测 Vue 应用、搭建与后端的桥接通道。4.3 独立应用Standalone停留在 v8独立应用用于浏览器不支持扩展或**有特殊场景如 Electron 应用**的情况。需要注意独立应用仍停留在 v8不在 v9 分发范围内见 docs/guide/standalone.md。全局安装后使用$ npm add -g vue/devtools # 或 pnpm add -g / yarn global add / bun add -g启动服务vue-devtools然后在应用 HTML 的head中加入script srchttp://localhost:8098/script远程设备调试通过本地 IP 连接script window.__VUE_DEVTOOLS_HOST__ your-local-ip // 默认: localhost window.__VUE_DEVTOOLS_PORT__ devtools-port // 默认: 8098 /script script srchttp://your-local-ip:8098/script生产环境部署前务必移除上述脚本作为本地依赖使用$ npm add -D vue/devtools # 或 pnpm add -D / yarn add -D / bun add -D启动本地服务./node_modules/.bin/vue-devtools在应用中通过编程方式连接import { devtools } from vue/devtools if (process.env.NODE_ENV development) devtools.connect(/* host默认 http://localhost, port默认 8090 */)两个关键参数host可选指向 devtools 中间件服务器的地址。本机调试无需设置移动设备调试需传入本机 IP如http://192.168.1.12port可选中间件服务器的端口。若使用代理服务器可设为null这样端口不会拼进连接 URL。⚠️ 必须先调用devtools.connect()再创建 Vue 应用实例否则可能无法正常工作。独立应用常见问题摘自原文档 FAQ如何修改 DevTools 服务器端口启动时设置环境变量PORT8000 vue-devtools应用侧通过window.__VUE_DEVTOOLS_PORT__ 8000或devtools.connect(host, 8000)同步新端口。如何检视远程服务器上的页面使用ngrok代理启动vue-devtools后执行ngrok http 8098再在应用侧连接devtools.connect(https://example.ngrok.io, null)。此时 port 必须为null或false因为 ngrok 域名已代理到本机端口。如何检视 HTTPS 页面同样借助 ngrok它会自动把 https 请求代理到本地 http 服务。如何检视 Cordova 应用确保设备/模拟器能访问http://your-ip:8098返回的 JS必要时检查杀毒软件或路由器/防火墙连接时使用本机 IPdevtools.connect(http://192.168.xx.yy)并且仅对开发构建生效。五、深入 Vite 插件v9 的安装、配置与选项Vue DevTools v9 对 Vite 插件做了重大重构要求 Vite 8.3.0且需要额外安装vitejs/devtoolsv9 之前的版本不需要。5.1 安装$ npm add -D vite-plugin-vue-devtools # 默认安装 v9 # v9 还需要 $ npm add -D vite^8.3.0 vitejs/devtools想停留在 v8 时将包名指定为vite-plugin-vue-devtools8。仓库 packages/vite/package.json 中可以看到 v9 的peerDependencies明确声明了vite: ^8.3.0与vitejs/devtools: ^0.7.5。5.2 基础配置import { defineConfig } from vite import vueDevTools from vite-plugin-vue-devtools export default defineConfig({ devtools: { apply: serve, }, plugins: [vueDevTools()], })v9 中必须设置devtools: { apply: serve }以在开发期间启用 Vite DevTools 宿主v9 之前的版本只需plugins: [vueDevTools()]无需该选项。插件在开发期间若检测到 Vite DevTools 被禁用会输出警告。建议保持apply: serve——因为 Vue DevTools 的运行时集成只在开发期运行仅当你也希望在构建期启用 Vite DevTools 宿主时才使用devtools: true。5.3 配置 Vite DevTools 宿主v9dock 的可见性、布局、内建集成与品牌标识都通过 Vite 的devtools选项配置import { defineConfig } from vite import vueDevTools from vite-plugin-vue-devtools export default defineConfig({ devtools: { apply: serve, builtinDevTools: false, embeddedVisibility: passive, dockPreferences: { defaultMode: edge, defaultPosition: bottom, }, }, plugins: [vueDevTools()], })5.4 插件选项enabled与appendTov9 插件本身只保留两个选项定义在 packages/vite/src/options.tsinterface VitePluginVueDevToolsOptions { /** * Whether to install Vue DevTools and register its dock entry. * default true */ enabled?: boolean /** * Inject the Vue DevTools client into matching browser entry modules instead * of relying on Vites HTML transform. * default undefined */ appendTo?: string | RegExp | Arraystring | RegExp }enabled设为false可同时禁用 Vue 运行时集成及其 dock 入口appendTo默认情况下插件通过 Vite 的 HTML 转换注入客户端对于没有 Vite 管理的 HTML 入口的项目如 Laravel、WXT 等可传入一个或多个浏览器入口模块匹配器让客户端直接注入入口模块。字符串匹配解析后模块路径的结尾正则表达式则对完整解析路径执行测试VueDevTools({ appendTo: [resources/js/app.ts, /\/entry\.client\.m?js$/], })只有匹配的客户端模块会被修改SSR 转换会被跳过同一模块不会重复注入。从 packages/vite/src/client-injection.ts 的源码可以印证匹配与注入机制L30-L39transform 钩子会先排除transformOptions?.ssr的模块再通过matchesModule()L68-L75字符串用endsWith、正则用test且每次重置lastIndex判断是否命中命中后以/* vue-devtools:client-injection */标记并前置import ...client...若appendTo未设置则回退到transformIndexHtml的head-prepend脚本注入。注入模块内部会调用installVueDevTools()并处理 HMR 的accept/dispose以正确清理运行时L77-L87。六、通过插件 API 扩展 DevTools入口文档的第三个特性块Extensible可扩展对应的正是插件 API。Vue DevTools v9 继续为受支持的自定义检视器inspectors、组件钩子、时间线图层与插件设置提供v6 风格的插件 setup API。6.1 安装与基础用法$ npm add -D vue/devtools-api注册一个插件docs/plugins/api.mdimport { setupDevToolsPlugin } from vue/devtools-api setupDevToolsPlugin( { id: example, label: Example, app, }, (api) { api.addInspector({ id: example, label: Example, }) }, )历史拼写setupDevtoolsPlugin仍作为别名可用。6.2 连接生命周期钩子import { onDevToolsClientConnected, onDevToolsConnected } from vue/devtools-api onDevToolsConnected(() { console.log(devtools runtime connected) }) onDevToolsClientConnected(() { console.log(devtools client connected) })onDevToolsConnected在运行时就绪时触发onDevToolsClientConnected在 DevTools UI 客户端也挂接后触发。vue/devtools-api在 SSR 下安全可导入——其 Node 导出不执行任何浏览器侧工作对应仓库 packages/devtools-api/src/index-node.ts 的独立导出。插件运行时与协议层的实现在 packages/kit/src/pluginapi.ts、registry.ts、lifecycle.ts与 packages/kit/src/protocolmessages.ts、requests.ts中。6.3 v9 移除的 API 与替代方案v8 APIv9 替代方案addCustomTab用ctx.docks.register()注册iframe、custom-render、json-render等 dock 入口addCustomCommand用ctx.commands.register()注册命令removeCustomCommand保留ctx.commands.register()返回的句柄调用handle.unregister()这些替代 API 位于基于 Devframe 的 Vite DevTools Kit 集成面上dock 与命令注册底层由框架无关的 Devframe Hub 提供。七、版本迁移从 v8 到 v9 的完整要点docs/guide/migration.md 整理了迁移指南核心结论如下。7.1 分发范围变化独立应用、Electron 宿主与Firefox 扩展停留在 v8不包含在 v9 中v9 保持 v6 风格的插件 setup API但移除了 Vue 层面的导航与命令 API即上文 6.3 表格中的三个。7.2 Vite 插件迁移清单componentInspector选项已移除——组件检视已内建到 Vue DevTools dock不再作为独立插件选项launchEditor已移除——源码文件请求通过vite:core:open-in-editor转发给vitejs/devtools过时的openInEditorHost、clientHost选项确认移除安装vitejs/devtools在 Vite 配置中设置devtools: { apply: serve }并配合plugins: [vueDevTools()]移除任何显式的DevTools()插件注册——Vue DevTools 不再自动启动或品牌化共享的 DevTools 宿主builtinViteDevTools迁移为devtools.builtinDevToolsembeddedVisibility与dockPreferences迁移到devtools对应字段插件不再导出VueDevToolsDockPreferences类型改用 Vite 的devtools配置类型用enabled与appendTo配置 Vue 集成appendTo同时接受字符串与正则的数组。7.3 v6 → v7 的要点v7 起只支持 Vue 3插件时间线标签页被移入各插件的菜单中统一管理v7 插件 API 与 v6 兼容仅类型不同。八、打开组件源码Open in Editordocs/getting-started/open-in-editor.md 专门讲解了在编辑器中打开组件源码这一高频需求Vite 插件当连接的 Vite DevTools 宿主暴露 open-in-editor 能力时开箱即用。v9 起Vue DevTools 只负责把组件源码路径转发给vite:core:open-in-editor路径校验、编辑器启动与诊断由vitejs/devtools处理。想指定编辑器在启动 Vite 时设置LAUNCH_EDITOR环境变量如cursor或code不设置时Vite DevTools 会自动从当前正在运行的编辑器中挑选安全约束源码文件必须解析到 Vite workspace 根目录内否则请求会被拒绝浏览器扩展v9 的浏览器扩展不支持打开源码文件该操作已被隐藏请改用 Vite 插件。九、常见框架集成Laravel / Nuxt / Vite Ruby / WXT针对非标准 Vite 项目docs/help/faq.md 给出了开箱即用的配置模板核心都是通过appendTo指定应用入口Laravel Vite 插件import laravel from laravel-vite-plugin import { defineConfig } from vite import VueDevTools from vite-plugin-vue-devtools export default defineConfig({ devtools: { apply: serve, }, plugins: [ VueDevTools({ appendTo: resources/js/app.js, }), laravel([resources/js/app.js]), ], })Nuxt 3export default defineNuxtConfig({ vite: { devtools: { apply: serve, }, plugins: [ VueDevTools({ appendTo: /\/entry\.m?js$/, }), ], }, })Nuxt 场景官方仍推荐使用 Nuxt DevTools 以获得更完整的体验。Vite Rubyexport default defineConfig({ devtools: { apply: serve, }, plugins: [ VueDevTools({ appendTo: app/frontend/entrypoints/application.js, // 你的应用入口调用 createApp() 的位置 }), RubyPlugin(), vue(), ], })WXTexport default defineConfig({ modules: [wxt-dev/module-vue], vite: () ({ devtools: { apply: serve, }, plugins: [ devtools({ appendTo: /entrypoints/popup/main.ts, // 你的应用入口调用 createApp() 的位置 }), ], }), })十、仓库结构导读读懂 devtools-next 源码如果你想深入了解实现当前仓库按包组织与本文介绍的能力一一对应packages/clientDevTools UI 客户端Vue 3 Vite包含上述全部面板页面与命令面板src/pages、src/composables 中的command-palette.ts、devtools-timeline.ts等packages/kit运行时内核负责组件检视、状态编辑、响应式依赖图、时间线与插件注册src/runtime、src/plugin、src/protocolpackages/vitevite-plugin-vue-devtools插件本体src/client-injection.ts、src/options.tspackages/chrome浏览器扩展manifest.json与 src/backgroundpackages/devtools-api面向插件作者的公开 API 包src/index.ts。仓库还提供了大量自动化测试作为行为契约例如 tests/integration/client 下的命令面板、组件树、时间线控制测试tests/unit/vite 下的客户端注入与 dock 注册测试以及 tests/unit/rpc 下的运行时 RPC 测试可作为理解各功能预期行为的补充素材。结语从入口文档的四条主线出发可以看到Vue DevTools 是一套定位清晰、分层设计的调试工具链客户端 UIclient、运行时内核kit、接入层vite 插件 / chrome 扩展 / standalone与扩展 APIdevtools-api彼此解耦。选择接入方式时优先考虑 Vite 插件以获取 Inspector、Inspect 与 Open in Editor 等完整能力v9 用户务必遵循新的devtools配置与vitejs/devtools依赖要求自定义库的集成则统一走 v6 风格的插件 API。掌握本文内容后你既能在日常开发中充分发挥其检视、调试与性能分析能力也能为团队库编写定制化 DevTools 集成。赞分享【免费下载链接】devtools-next⚙️ Devtools for debugging Vue.js applications.项目地址https://gitcode.com/gh_mirrors/de/devtools-next点击查看免费下载相关推荐从调试到优化Selenoid中Chrome开发者工具(DevTools)的全链路应用指南从调试到优化Selenoid中Chrome开发者工具 DevTools 的全链路应用指南 引言为什么Selenoid的DevTools集成是自动化测试的颠覆Vue.js Devtools 开发者工具安装配置指南项目基础介绍和主要编程语言 Vue.js Devtools 是一个专为 Vue.js 应用程序设计的浏览器扩展开发者工具。它允许开发者在浏览器中实时查看和调试开发工具前端调试器如何调试 NativeScript-Vue 应用Vue Devtools 与 NativeScript 调试工具详解NativeScript Vue 是构建跨平台移动应用的强大框架但调试过程可能让开发者头疼。本文将为你详细介绍 Vue Devtools 与 NativeSc移动开发前端跨平台上一篇Teable 日历视图排期实战把杂乱任务表变成可视化项目时间线下一篇终极Vuls内存优化指南提升漏洞扫描性能的核心技术解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考