官网地址

官网首页

有什么不同

可能你现在已经在使用旧版的 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 插件

Vue DevTools 需要 Vite v3.1 或更高版本

如果你的项目使用 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'

请确保在 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。

© 允许规范转载