值得一提的是,DevTools 仅兼容 Vue 3,如果仍在使用 Vue2 可以改用 vue-devtools。而如果使用 Nuxt,则可以使用 nuxt-devtools 以获得更强大的开发人员体验。 目前Vue DevTools 在 Github 通过 MIT 协议开源,有超过 0.5k 的 star、1k 的项目依赖量,是一个值得关注的 Vue 生态前端开源项目。 如何使用 Vue DevToo...
Vue DevTools 提供了一个用于运行 Vue DevTools 的 Vite 插件。如果项目使用 Vite，强烈建议将其作为运行 DevTools 的首选选项，因为它提供了更强大的功能。$ npm add -D vite-plugin-vue-devtools// pnpm$ pnpm add -D vite-plugin-vue-devtools// yarn$ yarn add -D vite-plugin-vue-devtools// bun$ bun...
constversion=app.version 3. 访问 Vue Devtools 实例 我们需要访问 Vue Devtools 实例,可通过以下方式访问window.__VUE_DEVTOOLS_GLOBAL_HOOK__, 将其存储在一个名为devtools的变量中,并将其属性enabled设置为true: constdevtools=window.__VUE_DEVTOOLS_GLOBAL_HOOK__ devtools.enabled=true 重新初始化 Vue 应用实...
1. 确认Vue Devtools的兼容性及安装情况 Vue Devtools是一个浏览器扩展,适用于Chrome、Firefox等主流浏览器。 确保你访问的是正确的扩展商店(如Chrome Web Store或Firefox Add-ons),并搜索“Vue.js devtools”进行安装。 2. 在Vue3项目中引入Vue Devtools Vue Devtools的安装主要是浏览器端的操作,不需要在Vue 3项...
Vue3 项目开启 vue devtools 以element-plus 为例: Chrome 访问https://cn.element-plus.org/zh-CN/component/overview.html。 快捷键F12启动开发者工具。 在控制台运行以下代码: varnode;constwalker =document.createTreeWalker(document.body,1);while((node = walker.nextNode())) {constvm = node.__vue...
今天无意中发现一个基于 Vite Vue3 非常优雅的插件:vue-devtools。 插件介绍 Chrome 浏览器的 Vue Dev Tools 很多人都使用过,优雅哥分享的这个 devtools 不是浏览器插件,而是基于 vite vue3 的 Vite 插件,运行在页面上: vite-plugin-vue-devtools
已经几个月没写代码了,时间很多,再不学习一下vue3是不是落后了。 既然要用新版本,阅读官网和网上的技术贴是必不可少的,看到有人提到vue2版本的devtools不兼容vue3,当我跑起来测试项目以后发现确实如此,f12以后见不到那个vue了,并且扩展程序也显示的vue.js not detected。
3. Vuex集成 如果你的项目中使用了Vuex进行状态管理,那么vue-devtools还可以帮助你更方便地调试Vuex状态。在vue-devtools的面板中,可以看到一个“Vuex”选项卡。点击该选项卡,可以查看当前的Vuex状态树、mutations和actions等信息。 五、总结 vue-devtools作为一款强大的Vue.js调试工具,为开发者提供了丰富的功能和便捷...
开始一直下载的6.6.4,然后6.6.3版本都测试了一下,发现安装到扩展程序中,6.6.4 Vue(Legacy),6.6.3的版本,Vue面板一片空白。用不起来。项目中Vue是3.x。 当然有好用的版本,6.6.1的版本: 百度网盘:Vue.js devtools 6.6.1.crx 链接:https://pan.baidu.com/s/1WSfY8tj8_gro4QIfTvtBIw提取码: c26b ...
vue3 devtools 安装教程 vue devtools 工具使用起来很方便,之前的插件突然不能用了,便想着再安装一下 过程1 于是,在官网https://github.com/vuejs/devtools下载了,然后执行以下步骤: 1.npm install 2.npm run build 结果是,报错了,报错信息如下: lerna notice cliv4.0.0lernainfoExecuting command in9packages:...