官网地址
有什么不同
可能你现在已经在使用旧版的 DevTools ,对于新版的 DevTools ,只与 Vue 3 兼容,如果使用 Vue 2 ,可以使用旧版的 Devtools ,另外,如果使用的是 Nuxt ,建议使用 Nuxt DevTools 获得更强大的开发体验
特征
概述
显示应用的快速概览,包括 Vue 版本、页面和组件
页面
“页面”选项卡显示您当前的路线以及一些有用的信息,并提供了一种在页面之间导航的快速方法。还可以使用文本框查看每个路由的匹配情况
组件
“组件”选项卡显示组件信息,包括节点树、状态等。并提供一些交互功能,例如编辑状态、滚动到组件等
资产
"资产"选项卡显示项目目录中的文件,您可以通过一些有用的操作查看所选文件的信息
时间线
"时间线"选项卡允许您浏览状态或事件的先前版本
Router
Router 选项卡是与 vue-router 集成的一项功能,允许您查看路由列表及其详细信息
Pinia
Pinia 选项卡是与 pinia 集成的一项功能,允许您查看 store 列表及其详细信息,并编辑状态
图
"图"选项卡显示模块之间的关系
设置
“设置”选项卡提供了一些用于自定义 DevTools 的选项
Inspect
Inspect 暴露了 vite-plugin-inspect 集成,允许你检查 Vite 的转换步骤
Inspector
Inspector 暴露了 vite-plugin-vue-inspector 集成,你可以检查应用的 DOM 树,看看是哪个组件在渲染它。找到进行更改的地方要容易得多
独立窗口
Vue DevTools 能够作为一个单独的窗口运行,当你想在小屏幕中调试你的应用程序时,它非常有用
如何使用
安装方式
目前 DevTools 提供了三种安装方式
Vite 插件
如果你的项目使用 Vite 构建,那么通过 Vite 插件来使用 DevTools 是最好的选择
安装
npm add -D vite-plugin-vue-devtools
pnpm add -D vite-plugin-vue-devtools
yarn add -D vite-plugin-vue-devtools
bun add -D vite-plugin-vue-devtools
使用
// Configuration Vite
import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
plugins: [
VueDevTools(),
],
})
配置
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 中),您可以使用独立应用程序
安装
全局安装
npm add -g @vue/devtools
pnpm add -g @vue/devtools
yarn global add @vue/devtools
bun add -g @vue/devtools
作为项目依赖安装
npm add -D @vue/devtools
pnpm add -D @vue/devtools
yarn add -D @vue/devtools
bun add -D @vue/devtools
用法
使用全局包
安装后运行:
vue-devtools
然后将以下代码添加到应用程序 HTML 文件的部分:<head>
<script src="http://localhost:8098"></script>
或者,如果要远程调试设备:
<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>
使用依赖包
将包安装为项目依赖项后,运行:
./node_modules/.bin/vue-devtools
然后直接在应用中导入它:
import { devtools } from '@vue/devtools'
并连接到主机:
if (process.env.NODE_ENV === 'development')
devtools.connect(/* host, port */)
host - 是一个可选参数,用于告诉应用程序 devtools 中间件服务器在何处运行,如果您在计算机上调试应用程序,则不必设置此参数(默认值为 ),但如果要在移动设备上调试应用程序,则可能需要传递本地 IP(例如)。http://localhost
http://192.168.1.12
port - 是一个可选参数,用于告知应用程序在哪个端口上运行 devtools 中间件服务器。如果使用代理服务器,则可能需要将其设置为null
,以便不会将端口添加到连接 URL。