总之,现在做Vue 3 + Vite开发,vite-plugin-vue-devtools基本属于必装插件了,特别是你要做真机联调或者需要一个稳定的调试体验的时候,真的会爱上。 仓库地址:https://github.com/vuejs/devtools/tree/main v7开始,使用的新仓库目前只有 2.7k 🌟
良好的开发者体验(DX)对于开源产品的使用至关重要。 正因为如此,框架作者需要一直致力于DX和UX的改进,以免落后于竞争对手。 在今天的文章中,我想深入研究我最近发现的一个项目- Vue Vite DevTools。这个项目…
Anthony Fu在Vue Amsterdam 2023上开源了Nuxt DevTools,这是一个可以帮助我们了解我们的Nuxt应用并进一步改善开发者体验的工具,它深深地触动和启发了我。Nuxt可以有这么酷的工具,那么Vue能不能也有一个呢?我们都知道官方已经有一个Vue Devtools的浏览器扩展,那么我们能不能做一个跟Vite绑定的Vue Devtools,在实现原先V...
是一个用于在 Vue 3 项目中集成 Vue DevTools 的 Vite 插件。以下是使用 vite-plugin-vue-devtools 的详细步骤: 1. 安装插件 首先,确保你的项目是基于 Vite 和 Vue 3 的。如果尚未创建项目,可以使用以下命令创建一个新的 Vite + Vue 3 项目:
vite-plugin-vue-devtools 目前在 Github 上近千个 star,Github 地址: https://github.com/webfansplz/vite-plugin-vue-devtools 集成该插件后,在页面底部中间位置会有一个小图标,点击图标就在当前界面上展示 DevTools。 该插件功能强大,可以展示系统的路由信息、页面信息、组件、静态资源、Pinia 全局状态管理等。点...
Vite Plugin独立 APPChrome 扩展程序 Vue DevTools 的典型优质特征可以概括为以下几点：优质开发者经验：通过令人惊叹的体验增强开发者 Vue 开发之旅！广泛的应用程序：支持 Vite 插件、浏览器扩展、独立应用，总有一款适合您。可扩展：提供用于集成的插件 API，这是库和开发工具之间的友好桥梁。组件向导：支持查看组件...
Vite 插件 独立应用 Chrome 扩展(目前还在开发中) 下面来看看如何通过Vite 插件和独立应用来使用 Vue DevTools。 注意: DevTools 仅兼容 Vue 3。如果使用 Vue2,请改用 vue-devtools。 如果使用 Nuxt,请使用 nuxt-devtools 以获得更强大的开发者体验。
Vite Plugin:基于vite的项目,可以试一下内置的模式。 Standalone App :如果您使用的浏览器不受支持,或者您有其他特定需求(例如您的应用程序在Electron中),您可以使用独立应用程序。 Chrome Extension: 基于浏览器Chrome的扩展中使用。 3、Vite Plugin: https://devtools.vuejs.org/guide/vite-plugin ...
您还可以使用“Inspector”功能来检查DOM树，并查看是哪个组件在渲染它。单击可转到特定行的编辑器。使更改变得更加容易，而不需要彻底理解项目结构。（此功能是基于vite插件vue检查器实现的）Vue DevTools 安装 # vite-plugin-vue-devtools pnpm install vite-plugin-vue-devtools -D 用法 import { defineConfig } ...
想学习一下vue-devtools 打开组件的功能,vue-cli项目可以正常断点到launch-editor-middleware中,vite项目却不支持,这些chunks下的js是什么情况。。。vue-cli正常断点