【vue工程搭建系列】如何在生產(chǎn)環(huán)境調(diào)試程序

1、妙用Vue.config.devtools

vue-devtools在測(cè)試環(huán)境默認(rèn)是開(kāi)啟狀態(tài)，在生產(chǎn)環(huán)境默認(rèn)是關(guān)閉狀態(tài)，我們可以使用白名單進(jìn)行管理開(kāi)啟vue-devtools權(quán)限的人員，方便我們?cè)谏a(chǎn)出現(xiàn)問(wèn)題時(shí)的定位。我們也可以通過(guò)檢測(cè)cookie里的用戶角色信息去決定是否開(kāi)啟該配置項(xiàng)，從而提高線上 bug 查找的便利性。

// 務(wù)必在加載 Vue 之后，立即同步設(shè)置以下內(nèi)容Vue.config.devtools?=?true;

2、安裝油猴插件，編寫腳本

??? vue devtools的原理：vue devtools擴(kuò)展組件會(huì)在window全局注入__VUE_DEVTOOLS_GLOBAL_HOOK__變量，Vue就是根據(jù)這個(gè)變量判斷是否需要調(diào)試的。

????

????油猴腳本

(function()?{    function openVueTool(){        // 在方法中執(zhí)行，避免污染全局變量        // 開(kāi)啟vue2 production調(diào)試的方法         // 1.找vue實(shí)例，可以說(shuō)99%的應(yīng)用是用的app.__vue__        // 如果實(shí)在找不到,那么就到找到任意組件，用組件元素.__vue__.$root來(lái)獲取        var vue = app.__vue__          // 2.vue構(gòu)造函數(shù)        var constructor = vue.__proto__.constructor          // 3.Vue有多級(jí)，要找到最頂級(jí)的        var Vue = constructor        while (Vue.super){            Vue = Vue.super        }        console.log(Vue)         // 4.找到config，并且把devtools設(shè)置成true        Vue.config.devtools = true;           // 5.注冊(cè)到Vue DevTool上        var hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__hook.emit('init',Vue)            // 6.如果有vuex store，也注冊(cè)//這部分代碼參考了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命令

一旦我們選擇了元素，就可以在控制臺(tái)中輸入$0,$0表示最后選擇的元素。$1是之前選擇的元素,依此類推.它記得最后五個(gè)元素$0 – $4.

要查看Vue實(shí)例的詳細(xì)信息，可以使用?$0.__vue__