什么是 Vue DevTools
Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用程序。
Vue DevTools：Unleash Vue Developer Experience. Enhance your Vue development journey with an amazing experience!
典型的功能特征包括：
- Pages：显示当前的路由以及一些有用的信息，并提供在页面之间导航的快速方法。开发者还可以使用文本框查看每条路由的匹配情况。
- Components： 显示组件信息，包括节点树、状态等。并提供一些交互功能，例如：编辑状态、滚动到组件等。
- Assets： 显示项目目录中的文件，开发者可以通过一些有用操作查看所选文件信息。
- Timeline：允许浏览状态或事件的先前版本。
- Pinia： 与 pinia 集成的功能，允许查看 store 列表及其详细信息，并编辑状态
- Gragh：显示模块之间的关系。
比如以下展示了不同功能的截图：
在 Vue 项目中使用 Vue DevTools 有多种方法，比如：
- Vite Plugin
- 独立 APP
- Chrome 扩展程序
Vue DevTools 的典型优质特征可以概括为以下几点：
- 优质开发者经验：通过令人惊叹的体验增强开发者 Vue 开发之旅！
- 广泛的应用程序：支持 Vite 插件、浏览器扩展、独立应用，总有一款适合您。
- 可扩展：提供用于集成的插件 API，这是库和开发工具之间的友好桥梁。
- 组件向导：支持查看组件节点树、状态和关系。
值得一提的是，DevTools 仅兼容 Vue 3，如果仍在使用 Vue2 可以改用 vue-devtools。而如果使用 Nuxt，则可以使用 nuxt-devtools 以获得更强大的开发人员体验。
目前 Vue DevTools 在 Github 通过 MIT 协议开源，有超过 0.5k 的 star、1k 的项目依赖量，是一个值得关注的 Vue 生态前端开源项目。
如何使用 Vue DevTools
Vite Plugin
Vue DevTools 提供了一个用于运行 Vue DevTools 的 Vite 插件。如果项目使用 Vite，强烈建议将其作为运行 DevTools 的首选选项，因为它提供了更强大的功能。
$ npm add -D vite-plugin-vue-devtools
// pnpm
$ pnpm add -D vite-plugin-vue-devtools
// yarn
$ yarn add -D vite-plugin-vue-devtools
// bun
$ bun add -D vite-plugin-vue-devtools然后直接在 Vite 配置中添加该插件：
// Configuration Vite
import {defineConfig} from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
plugins: [
VueDevTools(),
],
})独立应用程序
如果使用不受支持的浏览器，或者有其他特定需求（例如应用程序位于 Electron 中）则可以使用独立应用程序。
首先安装相应依赖：
$ npm add -g @vue/devtools
// pnpm
$ pnpm add -g @vue/devtools
// yarn
$ yarn global add @vue/devtools
// bun
$ bun add -g @vue/devtools全局安装该软件包后，运行下面命令：
vue-devtools
// 通过PORT=8000 vue-devtools改变端口，然后在APP中通过下面设置
window.__VUE_DEVTOOLS_PORT__ = 8000
// 或者
devtools.connect(/ host /, 8000)然后将下面代码添加到应用程序 HTML 文件的 <head> 部分：
<script src="http://localhost:8098"></script>
// 通过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>
// 这里的ip需要设置为真实机器IP<your-local-ip> 通常类似 192.168.x.x。
当然，也可以选择在应用中导入：
import {devtools} from '@vue/devtools'
// 导入包然后使用 connect 方法：
if (process.env.NODE_ENV === 'development')
devtools.connect(/* 需要host和端口 */)- host : 是一个可选参数，告诉应用程序 devtools 中间件服务器在哪里运行，如果在计算机上调试应用程序，则不必设置此参数（默认为 http://localhost），但如果想调试同事应用程序位于移动设备上，...）。
- port : 是一个可选参数，告诉应用程序 devtools 中间件服务器正在哪个端口上运行。 如果使用代理服务器则可能需要将其设置为 null，以便端口不会添加到连接 URL。
以下示例需要确保 http://your-ip:8098 下的页面在设备/模拟器上返回 JavaScript 代码。 如果没有请务必检查防病毒或路由器/防火墙设置，如果有效请按照说明操作，并使用 IP 连接到开发工具。 例如：
import devtools from '@vue/devtools'
import Vue from 'vue'
// ...
function onDeviceReady() {
devtools.connect('http://192.168.xx.yy') // use your IP
}
if (window.location.protocol === 'file:')
document.addEventListener('deviceready', onDeviceReady, false)
else
onDeviceReady()本文总结
本文主要和大家介绍 Vue DevTools， Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具，它提供了一些功能来帮助开发者更好地了解 Vue 应用程序。因为篇幅问题，关于 Vue DevTools 只是做了一个简短的介绍。
参考资料
https://devtools-next.vuejs.org/guide/getting-started
https://github.com/vuejs/devtools-next/tree/f96ec0421d702d8fc05f5d04eeff1000231221c4
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。