# Vue-devtools-plugin

Vue-devtools-plugin 是一款vConsole & Eruda 插件，把Vue.js官方调试工具vue-devtools移植到移动端，可以直接在移动端查看调试Vue.js应用

For Eruda

Preview

CodePen Sample Code for Vue3

桌面使用：

移动端使用：

为什么需要本插件：

• 在任意浏览器和移动端上查看调试Vue.js应用
• 无需在浏览器安装Vue-devtools插件
• 支持Vue2 & Vue3

功能

• 移植了官方Vue-devtools的全部功能
• 针对移动端优化了部分操作方式
• 现已支持微信端内浏览器

使用方式

NPM方式引入

• vConsole:

  add vue-vconsole-devtools --dev

add eruda-vue-devtools --dev

• 在工程中入口文件 （如src/main.js）

...
// vconsole
import VConsole from "vconsole";
import { initPlugin } from 'vue-vconsole-devtools' // for vconsole
initPlugin(new VConsole()); // 需要在创建Vue根实例前调用 ...

...
// eruda
import { initPlugin } from 'eruda-vue-devtools' // for eruda
import eruda from 'eruda' // 引入工具包
eruda.init() // 初始化 initPlugin(eruda); // 需要在创建Vue根实例前调用 ...

• 如果devtools中没有加载出你的应用 请添加如下代码

// Vue 2.x
Vue.config.devtools = true;
window.VUEDEVTOOLSGLOBAL_HOOK.emit("init",Vue)

CDN方式引入

高级用法

• 只在开发环境下引入

new Vue({
     render: (h) => h(App),
   }).$mount("#app");
   
   // 在创建跟实例以后调用， 需要借助webpack的异步模块加载能力
   if(process.env.NODE_ENV === "development"){
      Promise.all([import("vconsole"), import("vue-vconsole-devtools")]).then(
        (res) => {
          if (res.length === 2) {
            Vue.config.devtools = true;
            window.VUEDEVTOOLSGLOBAL_HOOK.emit("init",Vue)
            const VConsole = res[0].default;
            const Devtools = res[1].default;
            Devtools.initPlugin(new VConsole());
          }
        }
      );
    }

更新日志

1.0.9

• 兼容了vConsole 3.14之后的新版本
• 更新Vue-devtools 6.5.0 支持更新的功能
• 更新之后解决了遗留的一些问题

v1.0.5

• 兼容CDN引入，优化引入方式
• 兼容ES6 解构运算符引入方式

v1.0.0

• 重大更新，升级Vue-devtools V6
• 兼容Vue3

v0.0.7

• 重要更新，解决iOS微信端浏览器兼容性问题
• 解决iOS阿里mPass容器兼容性问题

v0.0.3

• 优化了打包体积

Github

欢迎添加微信 OmniBug 探讨交流，Email: zippowangxinkai@gmail.com