Loading... <div class="tip share">请注意，本文编写于 434 天前，最后修改于 275 天前，其中某些信息可能已经过时。</div> > [官网地址](https://devtools-next.vuejs.org/)  ## 有什么不同 可能你现在已经在使用旧版的 DevTools ，对于新版的 DevTools ，只与 Vue 3 兼容，如果使用 Vue 2 ，可以使用旧版的 [Devtools](https://devtools.vuejs.org/) ，另外，如果使用的是 Nuxt ，建议使用 [Nuxt DevTools](https://github.com/nuxt/devtools) 获得更强大的开发体验 ## 特征 ### 概述 显示应用的快速概览，包括 Vue 版本、页面和组件  ### 页面 “页面”选项卡显示您当前的路线以及一些有用的信息，并提供了一种在页面之间导航的快速方法。还可以使用文本框查看每个路由的匹配情况  ### 组件 “组件”选项卡显示组件信息，包括节点树、状态等。并提供一些交互功能，例如编辑状态、滚动到组件等  ### 资产 "资产"选项卡显示项目目录中的文件，您可以通过一些有用的操作查看所选文件的信息  ### 时间线 "时间线"选项卡允许您浏览状态或事件的先前版本  ### Router Router 选项卡是与 [vue-router](https://github.com/vuejs/router) 集成的一项功能，允许您查看路由列表及其详细信息  ### Pinia Pinia 选项卡是与 [pinia](https://github.com/vuejs/pinia) 集成的一项功能，允许您查看 store 列表及其详细信息，并编辑状态  ### 图 "图"选项卡显示模块之间的关系  ### 设置 “设置”选项卡提供了一些用于自定义 DevTools 的选项  ### Inspect Inspect 暴露了 [vite-plugin-inspect](https://github.com/webfansplz/vite-plugin-inspect) 集成，允许你检查 Vite 的转换步骤  ### Inspector Inspector 暴露了 [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector) 集成，你可以检查应用的 DOM 树，看看是哪个组件在渲染它。找到进行更改的地方要容易得多  ### 独立窗口 Vue DevTools 能够作为一个单独的窗口运行，当你想在小屏幕中调试你的应用程序时，它非常有用  ## 如何使用 ### 安装方式 目前 DevTools 提供了三种安装方式  ### Vite 插件 <div class="tip inlineBlock warning"> Vue DevTools 需要 **Vite v3.1 或更高版本** </div> 如果你的项目使用 Vite 构建，那么通过 Vite 插件来使用 DevTools 是最好的选择 #### 安装 <div class="tab-container post_tab box-shadow-wrap-lg"> <ul class="nav no-padder b-b scroll-hide" role="tablist"> <li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" aria-controls='tabs-e780d95c1e9bccbcdbd27be54d8a2a66780' role="tab" data-target='#tabs-e780d95c1e9bccbcdbd27be54d8a2a66780'>npm</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-59593ebdb1d1036e1d82743d9260b80e191' role="tab" data-target='#tabs-59593ebdb1d1036e1d82743d9260b80e191'>pnpm</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-de86c5b30161310c34a9296b1bf14bc882' role="tab" data-target='#tabs-de86c5b30161310c34a9296b1bf14bc882'>yarn</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-7b4927e49730bfc065a01dc684570d60403' role="tab" data-target='#tabs-7b4927e49730bfc065a01dc684570d60403'>bun</a></li> </ul> <div class="tab-content no-border"> <div role="tabpanel" id='tabs-e780d95c1e9bccbcdbd27be54d8a2a66780' class="tab-pane fade active in"> ```shell npm add -D vite-plugin-vue-devtools ``` </div><div role="tabpanel" id='tabs-59593ebdb1d1036e1d82743d9260b80e191' class="tab-pane fade "> ```shell pnpm add -D vite-plugin-vue-devtools ``` </div><div role="tabpanel" id='tabs-de86c5b30161310c34a9296b1bf14bc882' class="tab-pane fade "> ```shell yarn add -D vite-plugin-vue-devtools ``` </div><div role="tabpanel" id='tabs-7b4927e49730bfc065a01dc684570d60403' class="tab-pane fade "> ```shell bun add -D vite-plugin-vue-devtools ``` </div> </div> </div> #### 使用 ```typescript // Configuration Vite import { defineConfig } from 'vite' import VueDevTools from 'vite-plugin-vue-devtools' export default defineConfig({ plugins: [ VueDevTools(), ], }) ``` #### 配置 ```typescript interface VitePluginVueDevToolsOptions { /** * append an import to the module id ending with `appendTo` instead of adding a script into body * useful for projects that do not use html file as an entry * * WARNING: only set this if you know exactly what it does. * @default '' */ appendTo?: string | RegExp /** * Customize openInEditor host (e.g. http://localhost:3000) * @default false */ openInEditorHost?: string | false /** * DevTools client host (e.g. http://localhost:3000) * useful for projects that use a reverse proxy * @default false */ clientHost?: string | false } ``` ### 独立应用程序 > 如果您使用的是不受支持的浏览器，或者您有其他特定需求（例如您的应用程序在 Electron 中），您可以使用独立应用程序 #### 安装 ##### 全局安装 <div class="tab-container post_tab box-shadow-wrap-lg"> <ul class="nav no-padder b-b scroll-hide" role="tablist"> <li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" aria-controls='tabs-fa1acc38d8c3de01af578e7eea67533f490' role="tab" data-target='#tabs-fa1acc38d8c3de01af578e7eea67533f490'>npm</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-396da88b6f91f84b6b33f66ced2f1a04121' role="tab" data-target='#tabs-396da88b6f91f84b6b33f66ced2f1a04121'>pnpm</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-f0272ed11c4f1b9503c05f0bbaa104c2952' role="tab" data-target='#tabs-f0272ed11c4f1b9503c05f0bbaa104c2952'>yarn</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-6206d9f4ae72621fb3697ed4a6452978433' role="tab" data-target='#tabs-6206d9f4ae72621fb3697ed4a6452978433'>bun</a></li> </ul> <div class="tab-content no-border"> <div role="tabpanel" id='tabs-fa1acc38d8c3de01af578e7eea67533f490' class="tab-pane fade active in"> ```shell npm add -g @vue/devtools ``` </div><div role="tabpanel" id='tabs-396da88b6f91f84b6b33f66ced2f1a04121' class="tab-pane fade "> ```shell pnpm add -g @vue/devtools ``` </div><div role="tabpanel" id='tabs-f0272ed11c4f1b9503c05f0bbaa104c2952' class="tab-pane fade "> ```shell yarn global add @vue/devtools ``` </div><div role="tabpanel" id='tabs-6206d9f4ae72621fb3697ed4a6452978433' class="tab-pane fade "> ```shell bun add -g @vue/devtools ``` </div> </div> </div> ##### 作为项目依赖安装 <div class="tab-container post_tab box-shadow-wrap-lg"> <ul class="nav no-padder b-b scroll-hide" role="tablist"> <li class='nav-item active' role="presentation"><a class='nav-link active' style="" data-toggle="tab" aria-controls='tabs-61685e97d43ac770ac471843f557743f710' role="tab" data-target='#tabs-61685e97d43ac770ac471843f557743f710'>npm</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-513ad035b8503703325edcafa04c4d21401' role="tab" data-target='#tabs-513ad035b8503703325edcafa04c4d21401'>pnpm</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-6e6d363116d3209c2aa691329eea5c6b52' role="tab" data-target='#tabs-6e6d363116d3209c2aa691329eea5c6b52'>yarn</a></li><li class='nav-item ' role="presentation"><a class='nav-link ' style="" data-toggle="tab" aria-controls='tabs-c54aa449f0282ff13dc0c02fffd1bdd6923' role="tab" data-target='#tabs-c54aa449f0282ff13dc0c02fffd1bdd6923'>bun</a></li> </ul> <div class="tab-content no-border"> <div role="tabpanel" id='tabs-61685e97d43ac770ac471843f557743f710' class="tab-pane fade active in"> ```shell npm add -D @vue/devtools ``` </div><div role="tabpanel" id='tabs-513ad035b8503703325edcafa04c4d21401' class="tab-pane fade "> ```shell pnpm add -D @vue/devtools ``` </div><div role="tabpanel" id='tabs-6e6d363116d3209c2aa691329eea5c6b52' class="tab-pane fade "> ```shell yarn add -D @vue/devtools ``` </div><div role="tabpanel" id='tabs-c54aa449f0282ff13dc0c02fffd1bdd6923' class="tab-pane fade "> ```shell bun add -D @vue/devtools ``` </div> </div> </div> #### 用法 ##### 使用全局包 安装后运行： ```shell vue-devtools ``` 然后将以下代码添加到应用程序 HTML 文件的部分：`<head>` ```html <script src="http://localhost:8098"></script> ``` 或者，如果要远程调试设备： ```html <script> window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098 </script> <script src="http://<your-local-ip>:8098"></script> ``` ##### 使用依赖包 将包安装为项目依赖项后，运行： ```shell ./node_modules/.bin/vue-devtools ``` 然后直接在应用中导入它： ```typescript import { devtools } from '@vue/devtools' ``` <div class="tip inlineBlock error simple small"> 请确保在 Vue 之前导入 devtools，否则它可能无法按预期工作。 </div> 并连接到主机： ```typescript if (process.env.NODE_ENV === 'development') devtools.connect(/* host, port */) ``` host - 是一个可选参数，用于告诉应用程序 devtools 中间件服务器在何处运行，如果您在计算机上调试应用程序，则不必设置此参数（默认值为 ），但如果要在移动设备上调试应用程序，则可能需要传递本地 IP（例如）。`http://localhost` `http://192.168.1.12` port - 是一个可选参数，用于告知应用程序在哪个端口上运行 devtools 中间件服务器。如果使用代理服务器，则可能需要将其设置为`null`，以便不会将端口添加到连接 URL。 © 允许规范转载 打赏 赞赏作者 微信 赞
