IT博客汇 | 下一代 Vue3 Devtools 正式开源

下一代 Vue3 Devtools 正式开源

xiangzhihong发表于 2024-01-15 17:05:27

什么是 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