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(...
值得一提的是，DevTools 仅兼容 Vue 3，如果仍在使用 Vue2 可以改用 vue-devtools。而如果使用 Nuxt，则可以使用 nuxt-devtools 以获得更强大的开发人员体验。目前 Vue DevTools 在 Github 通过 MIT 协议开源，有超过 0.5k 的 star、1k 的项目依赖量，是一个值得关注的 Vue 生态前端开源项目。如何使用 Vue De...
在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...
原文地址:https://mp.weixin.qq.com/s/0qh5zTBmQDiUi2FyUQqXAA 今天无意中发现一个基于 Vite Vue3 非常优雅的插件:vue-devtools。 插件介绍 Chrome 浏览器的 Vue Dev Tools 很多人都使用过,优雅哥分享的这个 devtools 不是浏览器插件,而是基于 vite vue3 的 Vite 插件,运行在页面上: vite-plugin-vue-d...
1. 在浏览器开发工具中打开控制台 Windows 或 Linux :Ctrl+Shift+J 苹果机:Cmd+Option+J 2. 访问Vue应用程序实例 在控制台输入: constapp=Array.from(document.querySelectorAll('*')).find((e)=>e.__vue_app__).__vue_app__ app变量将会得一个Vue实例的引用 ...
3. Vuex集成 如果你的项目中使用了Vuex进行状态管理,那么vue-devtools还可以帮助你更方便地调试Vuex状态。在vue-devtools的面板中,可以看到一个“Vuex”选项卡。点击该选项卡,可以查看当前的Vuex状态树、mutations和actions等信息。 五、总结 vue-devtools作为一款强大的Vue.js调试工具,为开发者提供了丰富的功能和便捷...
Vue Devtools 分为多个版本,本教程使用的演示 APP 由 Vue 3 搭建,未来的趋势也是 Vue 3,那么我们优先讲解 Vue Devtools Vue 3 的版本,即 Vue.js Devtools bate 版。 02-vue-devtools-setup 首先访问Chrome 应用商店,然后在搜索框搜索「Vue Devtools」,找到 Vue Devtools bate 版。
今天给大家推荐一个比 vue-devtools 更好用的插件vite-plugin-vue-devtools, 它是一个旨在增强 Vue 开发者体验的Vite插件。 插件安装 vite-plugin-vue-devtools无需浏览器安装,直接使用npm安装即可! #vite-plugin-vue-devtoolspnpminstallvite-plugin-vue-devtools-D ...
这个方法应该还是vue2.0的方法 vue3.0 vue-devtools import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) // 分环境处理 if (process.env.NODE_ENV === 'development') { if ('__VUE_DEVTOOLS_GLOBAL_HOOK__' in window) { ...
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...