【vue工程搭建系列】如何在生产环境调试程序

1、妙用Vue.config.devtools

vue-devtools在测试环境默认是开启状态，在生产环境默认是关闭状态，我们可以使用白名单进行管理开启vue-devtools权限的人员，方便我们在生产出现问题时的定位。我们也可以通过检测cookie里的用户角色信息去决定是否开启该配置项，从而提高线上 bug 查找的便利性。

// 务必在加载 Vue 之后，立即同步设置以下内容Vue.config.devtools = true;

2、安装油猴插件，编写脚本

    vue devtools的原理：vue devtools扩展组件会在window全局注入__VUE_DEVTOOLS_GLOBAL_HOOK__变量，Vue就是根据这个变量判断是否需要调试的。

    油猴脚本

(function() {    function openVueTool(){        // 在方法中执行，避免污染全局变量        // 开启vue2 production调试的方法         // 1.找vue实例，可以说99%的应用是用的app.__vue__        // 如果实在找不到,那么就到找到任意组件，用组件元素.__vue__.$root来获取        var vue = app.__vue__          // 2.vue构造函数        var constructor = vue.__proto__.constructor          // 3.Vue有多级，要找到最顶级的        var Vue = constructor        while (Vue.super){            Vue = Vue.super        }        console.log(Vue)         // 4.找到config，并且把devtools设置成true        Vue.config.devtools = true;           // 5.注册到Vue DevTool上        var hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__hook.emit('init',Vue)            // 6.如果有vuex store，也注册//这部分代码参考了https://blog.csdn.net/weixin_34352449/article/details/91466542        if(vue.$store){            var store = vue.$store;            store._devtoolHook = hook;            hook.emit('vuex:init', store);            hook.on('vuex:travel-to-state',function(targetState){                store.replaceState(targetState);            });            store.subscribe(function(mutation, state){                hook.emit('vuex:mutation', mutation, state);            });        }     }     openVueTool();})();

3、使用$0命令

一旦我们选择了元素，就可以在控制台中输入$0,$0表示最后选择的元素。$1是之前选择的元素,依此类推.它记得最后五个元素$0 – $4.

要查看Vue实例的详细信息，可以使用 $0.__vue__