Vue 新一代开发者工具来了

博主：江有汜
发布时间：2024 年 01 月 03 日
689 次浏览
暂无评论
5147字数
分类：编程

<div class="tip share">请注意，本文编写于 527 天前，最后修改于 369 天前，其中某些信息可能已经过时。</div>

> [官网地址](https://devtools-next.vuejs.org/)

![官网首页](https://yooss.cn/usr/uploads/2024/02/2320669221.png)

## 有什么不同

可能你现在已经在使用旧版的 DevTools ，对于新版的 DevTools ，只与 Vue 3 兼容，如果使用 Vue 2 ，可以使用旧版的 [Devtools](https://devtools.vuejs.org/) ，另外，如果使用的是 Nuxt ，建议使用 [Nuxt DevTools](https://github.com/nuxt/devtools) 获得更强大的开发体验

## 特征

### 概述

显示应用的快速概览，包括 Vue 版本、页面和组件

![](https://yooss.cn/usr/uploads/2024/01/2466331294.webp)

### 页面

“页面”选项卡显示您当前的路线以及一些有用的信息，并提供了一种在页面之间导航的快速方法。还可以使用文本框查看每个路由的匹配情况

![](https://yooss.cn/usr/uploads/2024/01/2802504776.webp)

### 组件

“组件”选项卡显示组件信息，包括节点树、状态等。并提供一些交互功能，例如编辑状态、滚动到组件等

![](https://yooss.cn/usr/uploads/2024/01/3014865016.webp)

### 资产

"资产"选项卡显示项目目录中的文件，您可以通过一些有用的操作查看所选文件的信息

![](https://yooss.cn/usr/uploads/2024/01/1480808110.webp)

### 时间线

"时间线"选项卡允许您浏览状态或事件的先前版本

![](https://yooss.cn/usr/uploads/2024/01/1649143192.webp)

### Router

Router 选项卡是与 [vue-router](https://github.com/vuejs/router) 集成的一项功能，允许您查看路由列表及其详细信息

![](https://yooss.cn/usr/uploads/2024/01/888225520.webp)

### Pinia

Pinia 选项卡是与 [pinia](https://github.com/vuejs/pinia) 集成的一项功能，允许您查看 store 列表及其详细信息，并编辑状态

![](https://yooss.cn/usr/uploads/2024/01/3604490102.webp)

### 图

"图"选项卡显示模块之间的关系

![](https://yooss.cn/usr/uploads/2024/01/1088816355.webp)

### 设置

“设置”选项卡提供了一些用于自定义 DevTools 的选项

![](https://yooss.cn/usr/uploads/2024/01/688964671.webp)

### Inspect

Inspect 暴露了 [vite-plugin-inspect](https://github.com/webfansplz/vite-plugin-inspect) 集成，允许你检查 Vite 的转换步骤

![](https://yooss.cn/usr/uploads/2024/01/1967412766.webp)

### Inspector

Inspector 暴露了 [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector) 集成，你可以检查应用的 DOM 树，看看是哪个组件在渲染它。找到进行更改的地方要容易得多

![](https://yooss.cn/usr/uploads/2024/01/3930006588.webp)

### 独立窗口

Vue DevTools 能够作为一个单独的窗口运行，当你想在小屏幕中调试你的应用程序时，它非常有用

![](https://yooss.cn/usr/uploads/2024/01/3698751496.png)

## 如何使用

### 安装方式

目前 DevTools 提供了三种安装方式

![](https://yooss.cn/usr/uploads/2024/01/1594011441.png)

### Vite 插件

Vue DevTools 需要 **Vite v3.1 或更高版本**
</div>

如果你的项目使用 Vite 构建，那么通过 Vite 插件来使用 DevTools 是最好的选择

#### 安装

```shell
npm add -D vite-plugin-vue-devtools
```

</div><div role="tabpanel" id='tabs-c543cf2c70b034853f3a87d7d017d11e231' class="tab-pane fade  ">

```shell
pnpm add -D vite-plugin-vue-devtools
```

</div><div role="tabpanel" id='tabs-36a85dd5f98b7123205c9511dc72939c582' class="tab-pane fade  ">

```shell
yarn add -D vite-plugin-vue-devtools
```

</div><div role="tabpanel" id='tabs-4537adb818c69b97e1a796112f1bbca6893' 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 中），您可以使用独立应用程序

#### 安装

##### 全局安装

```shell
npm add -g @vue/devtools
```

</div><div role="tabpanel" id='tabs-b2be9575aa40da2e84e79cf340c4e3f4541' class="tab-pane fade  ">

```shell
pnpm add -g @vue/devtools
```

</div><div role="tabpanel" id='tabs-d75482918fcfe357f1145cae7b7a3716272' class="tab-pane fade  ">

```shell
yarn global add @vue/devtools
```

</div><div role="tabpanel" id='tabs-90c3f4287cdce2097662d5c554f8b2b0543' class="tab-pane fade  ">

```shell
bun add -g @vue/devtools
```

</div>
</div>
</div>

##### 作为项目依赖安装

```shell
npm add -D @vue/devtools
```

</div><div role="tabpanel" id='tabs-ab4e9a6ca12929c7422975d1fa7a8aed81' class="tab-pane fade  ">

```shell
pnpm add -D @vue/devtools
```

</div><div role="tabpanel" id='tabs-66eedbcdf00db59fd18f1bd2fe0c2c9392' class="tab-pane fade  ">

```shell
yarn add -D @vue/devtools
```

</div><div role="tabpanel" id='tabs-7fb066a4b8d9c3dded3eb3d08a2156a8323' 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'
```

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

发表评论取消回复
使用Cookies保留部分信息用于下次快速评论

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

NLP 英文文本处理
浏览次数: 1909
NEO 65
浏览次数: 1295
WordPress 美化基于 Argon 主题
浏览次数: 1162
指弹-像风一样
浏览次数: 1084
WordPress 优化
浏览次数: 1035

不知名的男孩
我抄了
慕还松
不如
原神
不如我胡桃键帽
慕还松
不如原神
慕还松
smopes

Flutter 组件截图
浏览次数: 212
CSS Grid 布局中的自动排列
浏览次数: 747
基址寻址与变址寻址
浏览次数: 838
Dart 实现 LRUCache
浏览次数: 215
NEO 65
浏览次数: 1295

Vue 新一代开发者工具来了

江有汜 • 2024 年 01 月 03 日

<div class="tip share">请注意，本文编写于 527 天前，最后修改于 369 天前，其中某些信息可能已经过时。</div>

> [官网地址](https://devtools-next.vuejs.org/)

![官网首页](https://yooss.cn/usr/uploads/2024/02/2320669221.png)

## 有什么不同

## 特征

### 概述

显示应用的快速概览，包括 Vue 版本、页面和组件

![](https://yooss.cn/usr/uploads/2024/01/2466331294.webp)

### 页面

“页面”选项卡显示您当前的路线以及一些有用的信息，并提供了一种在页面之间导航的快速方法。还可以使用文本框查看每个路由的匹配情况

![](https://yooss.cn/usr/uploads/2024/01/2802504776.webp)

### 组件

“组件”选项卡显示组件信息，包括节点树、状态等。并提供一些交互功能，例如编辑状态、滚动到组件等

![](https://yooss.cn/usr/uploads/2024/01/3014865016.webp)

### 资产

"资产"选项卡显示项目目录中的文件，您可以通过一些有用的操作查看所选文件的信息

![](https://yooss.cn/usr/uploads/2024/01/1480808110.webp)

### 时间线

"时间线"选项卡允许您浏览状态或事件的先前版本

![](https://yooss.cn/usr/uploads/2024/01/1649143192.webp)

### Router

Router 选项卡是与 [vue-router](https://github.com/vuejs/router) 集成的一项功能，允许您查看路由列表及其详细信息

![](https://yooss.cn/usr/uploads/2024/01/888225520.webp)

### Pinia

Pinia 选项卡是与 [pinia](https://github.com/vuejs/pinia) 集成的一项功能，允许您查看 store 列表及其详细信息，并编辑状态

![](https://yooss.cn/usr/uploads/2024/01/3604490102.webp)

### 图

"图"选项卡显示模块之间的关系

![](https://yooss.cn/usr/uploads/2024/01/1088816355.webp)

### 设置

“设置”选项卡提供了一些用于自定义 DevTools 的选项

![](https://yooss.cn/usr/uploads/2024/01/688964671.webp)

### Inspect

Inspect 暴露了 [vite-plugin-inspect](https://github.com/webfansplz/vite-plugin-inspect) 集成，允许你检查 Vite 的转换步骤

![](https://yooss.cn/usr/uploads/2024/01/1967412766.webp)

### Inspector

![](https://yooss.cn/usr/uploads/2024/01/3930006588.webp)

### 独立窗口

Vue DevTools 能够作为一个单独的窗口运行，当你想在小屏幕中调试你的应用程序时，它非常有用

![](https://yooss.cn/usr/uploads/2024/01/3698751496.png)

## 如何使用

### 安装方式

目前 DevTools 提供了三种安装方式

![](https://yooss.cn/usr/uploads/2024/01/1594011441.png)

### Vite 插件

Vue DevTools 需要 **Vite v3.1 或更高版本**
</div>

如果你的项目使用 Vite 构建，那么通过 Vite 插件来使用 DevTools 是最好的选择

#### 安装

```shell
npm add -D vite-plugin-vue-devtools
```

</div><div role="tabpanel" id='tabs-c543cf2c70b034853f3a87d7d017d11e231' class="tab-pane fade  ">

```shell
pnpm add -D vite-plugin-vue-devtools
```

</div><div role="tabpanel" id='tabs-36a85dd5f98b7123205c9511dc72939c582' class="tab-pane fade  ">

```shell
yarn add -D vite-plugin-vue-devtools
```

</div><div role="tabpanel" id='tabs-4537adb818c69b97e1a796112f1bbca6893' 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(),
  ],
})
```

#### 配置

/**
   * 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 中），您可以使用独立应用程序

#### 安装

##### 全局安装

```shell
npm add -g @vue/devtools
```

</div><div role="tabpanel" id='tabs-b2be9575aa40da2e84e79cf340c4e3f4541' class="tab-pane fade  ">

```shell
pnpm add -g @vue/devtools
```

</div><div role="tabpanel" id='tabs-d75482918fcfe357f1145cae7b7a3716272' class="tab-pane fade  ">

```shell
yarn global add @vue/devtools
```

</div><div role="tabpanel" id='tabs-90c3f4287cdce2097662d5c554f8b2b0543' class="tab-pane fade  ">

```shell
bun add -g @vue/devtools
```

</div>
</div>
</div>

##### 作为项目依赖安装

```shell
npm add -D @vue/devtools
```

</div><div role="tabpanel" id='tabs-ab4e9a6ca12929c7422975d1fa7a8aed81' class="tab-pane fade  ">

```shell
pnpm add -D @vue/devtools
```

</div><div role="tabpanel" id='tabs-66eedbcdf00db59fd18f1bd2fe0c2c9392' class="tab-pane fade  ">

```shell
yarn add -D @vue/devtools
```

</div><div role="tabpanel" id='tabs-7fb066a4b8d9c3dded3eb3d08a2156a8323' 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>
```

或者，如果要远程调试设备：

##### 使用依赖包

将包安装为项目依赖项后，运行：

```shell
./node_modules/.bin/vue-devtools
```

然后直接在应用中导入它：

```typescript
import { devtools } from '@vue/devtools'
```

请确保在 Vue 之前导入 devtools，否则它可能无法按预期工作。
</div>

并连接到主机：

```typescript
if (process.env.NODE_ENV === 'development')
  devtools.connect(/* host, port */)
```

发表评论 取消回复 使用Cookies保留部分信息用于下次快速评论

Vue 新一代开发者工具来了

发表评论取消回复
使用Cookies保留部分信息用于下次快速评论