大家注意:因为微信最近又改了推送机制,经常有小伙伴说错过了之前被删的文章,或者一些限时福利,错过了就是错过了。所以建议大家加个星标,就能第一时间收到推送。
大家好,我是「前端实验室」
爱分享的了不起~
vue-devtools 是一款基于Chrome浏览器的插件,可以用于调试vue应用,也可以用来辅助我们找到各页面对应的Vue.js文件路径,想必大家都不陌生吧~
今天给大家推荐一个比 vue-devtools 更好用的插件 vite-plugin-vue-devtools
, 它是一个旨在增强 Vue 开发者体验的 Vite 插件。
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(),
],
})
需要注意的是仅在开发模式 下可用、仅支持 Vue3.0+ 、仅支持单实例 Vue 应用程序、不支持 SSR (如果你使用 Nuxt ,请使用 nuxt/devtools)。
Pages 选项卡显示您当前的页面路由并提供快速导航的方法。对于动态路由,它还提供了一个表单来交互式地填写每个参数。您还可以使用文本框来测试每个路由的匹配情况。
Components 选项卡显示您应用程序的所有组件树,您还可以选择它们来查看组件的详细信息(例如数据、属性)。
Assets 选项卡显示所有静态资源及其信息,您可以在浏览器中打开或下载它。
Timeline 选项卡包含三个类别:性能、路由导航和 Pinia,您可以在它们之间切换以查看状态变化和时间线。
Routes 选项卡是与 Vue Router 集成的功能,允许您查看注册的路由及其详细信息。
Pinia 选项卡是与 Pinia 集成的功能,允许您查看注册的模块及其详细信息。
Inspect 公开 vite-plugin-inspect 集成,允许您检查 Vite 的转换步骤,了解每个插件如何改变您的代码并发现潜在问题可能会有所帮助。
你还可以使用 Inspector 功能来检查 DOM 树并查看哪个组件正在渲染它,单击可转到特定行的编辑器,使更改变得更加容易,而无需彻底了解项目结构。
Github地址:https://github.com/webfansplz/vite-plugin-vue-devtools/tree/main