1、妙用Vue.config.devtools

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

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

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

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

????

????油猴腳本

(function()?{    function openVueTool(){        // 在方法中執(zhí)行，避免污染全局變量        // 開啟vue2 production調(diào)試的方法         // 1.找vue實例，可以說99%的應用是用的app.__vue__        // 如果實在找不到,那么就到找到任意組件，用組件元素.__vue__.$root來獲取        var vue = app.__vue__          // 2.vue構(gòu)造函數(shù)        var constructor = vue.__proto__.constructor          // 3.Vue有多級，要找到最頂級的        var Vue = constructor        while (Vue.super){            Vue = Vue.super        }        console.log(Vue)         // 4.找到config，并且把devtools設(shè)置成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__