很久以来官方调试工具Vue-devtools给予了Vue.js开发者很大的帮助，目前官方有Chrome、FireFox插件和Electron版本可以使用，在桌面上使用Chrome插件一直很顺手，但是到了Safari和移动端上只能用Electron版，安装和调试过程非常麻烦。
今天介绍的vConsole插件很大程度上解决了在移动端上调试的需求，如题图中展示。 vConsole是微信团队提供的一个开源调试工具，开发过小程序的同学应该不陌生，vConsole提供了插件能力，于是Vue-vConsole-devtools诞生。
安装和使用：
npm i -s vconsole
npm i -s vue-vconsole-devtools
在Vue工程入口文件中引入
//mian.js
import VConsole from "vconsole";
import Devtools from 'vue-vconsole-devtools'
Devtools.initPlugin(new VConsole()); // 注意需要创建Vue实例之前引入
仅开发模式下引入
缩小生产环境下的打包体积
const app = 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_DEVTOOLS_GLOBAL_HOOK__.vue
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor;
const VConsole = res[0].default;
const Devtools = res[1].default;
Devtools.initPlugin(new VConsole());
}
}
);
}
最后：
项目地址 如果对你有所帮助，感谢star!
