Vue-vconsole-devtools NPM

# Vue-vConsole-devtools

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

CodePen Sample Code

为什么需要本插件：

在Safari和移动端无法直接调试Vue.js
Electron版本的devtools安装和远程调试配置非常麻烦

功能

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

使用方式

NPM方式引入

npm i -s vue-vconsole-devtools
在工程中入口文件（如src/main.js）

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

CDN方式引入

<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-vconsole-devtools@0.0.7/dist/vue_plugin.js"></script>
<script>
  var vConsole = new window.VConsole();
  const Devtools = window.vueVconsoleDevtools["default"];
  Devtools.initPlugin(vConsole);
</script>

高级用法

只在开发环境下引入

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.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init",Vue)
         const VConsole = res[0].default;
         const Devtools = res[1].default;
         Devtools.initPlugin(new VConsole());
       }
     }
   );
 }