functioninit() {varnode;varrunning =falsetry{constwalker =document.createTreeWalker(document.body,1);while((node = walker.nextNode())) {constvm = node.__vue_app__if(vm) {// Vue3 项目window.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.push({app: vm,version: vm.version,types: {Comment:Symbol(...
1、文件 vite.config.ts 2、注释
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...
constdevtools=window.__VUE_DEVTOOLS_GLOBAL_HOOK__ devtools.enabled=true 重新初始化 Vue 应用实例: devtools.emit('app:init',app,version,{}) 最后, 关闭控制台后重新开启, 你会发现熟悉的Vue选项卡出现在控制台中
(兄弟们,官方这个地址总是有问题啊,我把谷歌内核版的上传了,正确开启vue3.0调试工具vue-devtools) 2.如果是用火狐浏览器,点击beta应该是直接进入火狐的插件中心,直接安装就行了。 如果安装谷歌版的,下载vuejs_devtools_beta-6.0.0.7-an+fx.xpi文件,6.0.0.7是我下载时候的最新版本号,下载好以后解压,进去npm insta...
值得一提的是,DevTools 仅兼容 Vue 3,如果仍在使用 Vue2 可以改用 vue-devtools。而如果使用 Nuxt,则可以使用 nuxt-devtools 以获得更强大的开发人员体验。 目前Vue DevTools 在 Github 通过 MIT 协议开源,有超过 0.5k 的 star、1k 的项目依赖量,是一个值得关注的 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...
打开谷应用商店,搜索vue devtools,选择 beat 的标识安装,如下所示: 注意,在使用 Vue3 devtools 时,要把 Vue2 devtools 的关掉,以免造成混淆。 第一步完成,如果商店打开不了的,自行百度,方法反正你们肯定比我多。 开始使用 安装完成了,我们打开控制台就有一个 Vue 的 tab,如果下所示: ...
vue-devtools 是一款基于Chrome浏览器的插件,可以用于调试vue应用,也可以用来辅助我们找到各页面对应的Vue.js文件路径,想必大家都不陌生吧~ 今天给大家推荐一个比 vue-devtools 更好用的插件 vite-plugin-vue-d…
今天无意中发现一个基于 Vite Vue3 非常优雅的插件:vue-devtools。 插件介绍 Chrome 浏览器的 Vue Dev Tools 很多人都使用过,优雅哥分享的这个 devtools 不是浏览器插件,而是基于 vite vue3 的 Vite 插件,运行在页面上: vite-plugin-vue-devtools