1、先安装node环境 2、在Git上下载vue-devtools安装包https://github.com/vuejs/vue-devtools 3、解压安装包,使用命令终端进入解压包目录 4、安装依赖包 npm install npm run build 5、在Chrome中添加扩展插件 6、完成插件安装,在Chrome中便可使用vue-devtools工具了。vu
在左侧面板的搜索框中输入组件名称或关键字,即可筛选出符合条件的组件。 3. Vuex集成 如果你的项目中使用了Vuex进行状态管理,那么vue-devtools还可以帮助你更方便地调试Vuex状态。在vue-devtools的面板中,可以看到一个“Vuex”选项卡。点击该选项卡,可以查看当前的Vuex状态树、mutations和actions等信息。 五、总结 vue...
原文地址:https://mp.weixin.qq.com/s/0qh5zTBmQDiUi2FyUQqXAA 今天无意中发现一个基于 Vite Vue3 非常优雅的插件:vue-devtools。 插件介绍 Chrome 浏览器的 Vue Dev Tools 很多人都使用过,优雅哥分享的这个 devtools 不是浏览器插件,而是基于 vite vue3 的 Vite 插件,运行在页面上: vite-plugin-vue-d...
通常,Vue Devtools在我的Vite项目上工作,但我正在与惯性作斗争。我添加了 NODE_ENV=development 到.env 和:vueApp.config.devtools = true : createInertiaApp({ title: (title) => title ? `${title} - ${appName}` : appName, resolve: (name) => resolvePageComponent( `./Pages/${name}.vue`,...
值得一提的是，DevTools 仅兼容 Vue 3，如果仍在使用 Vue2 可以改用 vue-devtools。而如果使用 Nuxt，则可以使用 nuxt-devtools 以获得更强大的开发人员体验。目前 Vue DevTools 在 Github 通过 MIT 协议开源，有超过 0.5k 的 star、1k 的项目依赖量，是一个值得关注的 Vue 生态前端开源项目。如何使用 Vue ...
在Vue 3中开启devtools,你可以按照以下步骤操作: 1. 确认Vue Devtools的兼容性及安装情况 Vue Devtools是一个浏览器扩展,适用于Chrome、Firefox等主流浏览器。 确保你访问的是正确的扩展商店(如Chrome Web Store或Firefox Add-ons),并搜索“Vue.js devtools”进行安装。 2. 在Vue3项目中引入Vue Devtools Vue Devto...
Vue3 关闭vueDevTools工具 1、文件 vite.config.ts 2、注释
今天给大家推荐一个比 vue-devtools 更好用的插件vite-plugin-vue-devtools, 它是一个旨在增强 Vue 开发者体验的Vite插件。 插件安装 vite-plugin-vue-devtools无需浏览器安装,直接使用npm安装即可! #vite-plugin-vue-devtoolspnpminstallvite-plugin-vue-devtools-D ...
当前最新版本:vue-devtools 6.0.0-beta.7 用这个版本主要是为了支持vue3 推荐直接下载 https://www.crx4chrome.com/crx/107268/ 自行构建
3. browser(四个版本都包含esm,浏览器的原生模块化方式,可以直接通过的方式来导入模块) vue.esm-browser.js vue.esm-browser.prod.js vue.runtime.esm-browser.js vue.runtime.esm-browser.prod.js 4. bundler(这两个版本没有打包所有的代码,只会打包使用的代码,需要配合打包工具来使用,会让Vue体积更小) vu...