写一个 Vue DevTools，让开发体验飞一会儿

前言

近年来，人们越来越关注开发者体验 (DX)。工具和框架也一直在努力改进 DX ，比如这两年光速发展的 Vite 。在大多数人的印象中，Vite 的特点是快，但是在我看来让它发展迅速并在前端构建工具占据一席之地的主要原因是它易用且扩展性强的插件设计机制，这让开发者能以较低成本开发插件或快速集成 Vite 到他们的工具和框架中，时至今日，大多数主流框架及工具都已经支持 Vite ，Vite 的生态也已经十分繁荣。Anthony Fu 在 Vue Amsterdam 2023 上开源了Nuxt DevTools，这是一个可以帮助我们了解我们的 Nuxt 应用并进一步改善开发者体验的工具，它深深地触动和启发了我。Nuxt 可以有这么酷的工具，那么 Vue 能不能也有一个呢？我们都知道官方已经有一个 Vue Devtools 的浏览器扩展，那么我们能不能做一个跟 Vite 绑定的 Vue Devtools ，在实现原先 Vue Devtools 能力的同时并集成现有 Vite 生态的一些插件来扩展太强的能力呢？并且我们可以通过暴露一些配置和能力来允许用户扩展和定制一些功能，来获取更好的灵活性。基于以上的思考，vite-plugin-vue-devtools诞生了，让我们来看看它带来了什么!

介绍 Vue DevTools

Overview

展示应用程序的快速概览，扩展应用正在使用的 Vue 版本、页面和组件数量。

Pages

Pages Tab 展示了当前注册的路由并且提供了一个快捷的方式进行路由导航。对于动态路由，它还提供了一个表单来交互式地填写每个参数。你还可以在搜索框输入指定的路径来匹配相应的路由。

Components

Components Tabs 展示了你在应用程序使用的组件和它们的层级关系。你可以选中相应的组件来查看它的详细信息(例如 data 、props 等)。

Assets

Assets Tab 展示了你的静态资源列表(目前只展示 Vite config.publicDir 目录下资源)以及它们的详细信息，你可以在浏览器打开或下载它们。

Timeline

Timeline Tab 分为三个分类：分别是性能、路由跳转及 Pinia 。你可以切换它们来查看对应的状态变化及时间线。

Routes

Routes Tab 是一个与 Vue Router 进行集成的功能，它允许你查看你所注册的路由及相关详细信息。

Pinia

Pinia Tab 是一个与 Pinia 进行集成的功能，它允许你查看你所注册的模块及相关详细信息。

Graph

Graph Tab 提供了显示组件之间关系的依赖视图。

Inspect

Inspect 集成了Vite -plugin- Inspect，允许你检查 Vite 的转换步骤。了解每个插件如何转换你的代码并发现潜在问题是很有帮助的。

Inspector

你也可以使用“Inspector”特性来检查 DOM 树，看看是哪个组件在渲染它。单击以转到特定行的编辑器。使更改更容易，而不需要彻底了解项目结构。(此功能基于vite-plugin-vue-inspector实现)

Vue DevTools 用法

安装

# vite-plugin-vue-devtools 

npm install vite-plugin-vue-devtools -D

配置

import { defineConfig } from 'vite'
import VueDevtools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    VueDevtools(),
    vue(),
  ],
})

注意事项

• 插件仅作用于开发模式
• 仅支持 Vue3.0+
• 目前仅支持单实例 Vue 应用 (多实例支持即将到来)
• 不支持 SSR 应用 (如果你正在使用 Nuxt ，请直接使用nuxt/devtools)
• 遵循 Vue devtools 配置，如果你配置了hide选项，它将同样作用于此插件，例:

  // 这个 Vue 实例将被插件忽略
  createApp({
    render: () => h(App),
    devtools: {
      hide: true,
    },
  })
  

致谢

这个插件的灵感高度来自于 Anthony Fu 创作的nuxt/devtools，并且复用了它的 UI 及一些功能。

结语

插件目前还处于 Early Preview 阶段、欢迎任何想法及 Bug 反馈。如果它对你有所帮助，请给它一个Star支持作者 ♥️。