哈喽,大家好 我是
xy👨🏻💻。 今天给大家推荐一款Vue3+Vite开发调试神器，让你彻底丢弃Vue Devtools。
前言
相信使用 Vue 的同学应该对 Vue Devtools 浏览器插件并不陌生，但是有些同学由于网络问题无法下载安装插件，所以今天给大家推荐一款更好用的插件 vite-plugin-vue-devtools，无需浏览器安装，直接使用npm安装即可使用，并且界面也很美观，功能更加强大。
安装插件
# vite-plugin-vue-devtools
pnpm install vite-plugin-vue-devtools -D
项目配置
import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
plugins: [
VueDevTools(),
vue(),
],
})
插件介绍
Overview
展示应用程序的快速概览，扩展应用正在使用的 Vue 版本、页面和组件数量。
Pages
Pages 展示了当前注册的路由并且提供了一个快捷的方式进行路由导航。
对于动态路由，它还提供了一个表单来交互式地填写每个参数。
你还可以在搜索框输入指定的路径来匹配相应的路由。
Components
Components 展示了你在应用程序使用的组件和它们的层级关系。你可以选中相应的组件来查看它的详细信息(例如 data、props 等)。
Assets
Assets 展示了你的静态资源列表(目前只展示 Vite config.publicDir 目录下资源)以及它们的详细信息，你可以在浏览器打开或下载它们。
Timeline
Timeline 分为三个分类：分别是性能、路由跳转及 Pinia。你可以切换它们来查看对应的状态变化及时间线。
Routes
Routes 是一个与 Vue Router 进行集成的功能，它允许你查看你所注册的路由及相关详细信息。
Pinia
Pinia 是一个与 Pinia 进行集成的功能，它允许你查看你所注册的模块及相关详细信息。
Graph
Graph 提供了显示组件之间关系的依赖视图。
Inspect
Inspect 集成了 Vite -plugin- Inspect，允许你检查 Vite 的转换步骤。了解每个插件如何转换你的代码并发现潜在问题是很有帮助的。
Inspector
你也可以使用 Inspector 特性来检查 DOM 树，看看是哪个组件在渲染它。单击以转到特定行的编辑器。使更改更容易，而不需要彻底了解项目结构。(此功能基于 vite-plugin-vue-inspector 实现)
写在最后
公众号：前端开发爱好者专注分享web前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞👍 或者 ➕关注都是对我最大的支持。
大家好，我 xy,是一名前端 🤫 爱好：瞎折腾
如果你也是一名瞎折腾的前端欢迎加我微信交流哦...
