vue 生產環境預設是無法啟用vue devtools的,如果生產應用出了問題,就很難解決。用本文提供的方法就可以實現線上debug vue,也不需要在瀏覽器上打斷點。
原理
先說下vue如何判斷devtools是否可用的。
vue devtools擴充套件元件會在window全域性注入__VUE_DEVTOOLS_GLOBAL_HOOK__變數,Vue就是根據這個變數判斷是否需要除錯的。
vue根例項初始化之前判斷Vue.config.devtools是否為true。若為true,
則呼叫window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', Vue)方法初始化除錯皮膚。
本方法的原理都寫在程式碼的註釋當中
方法步驟
1.複製下面的js程式碼,按F12 貼上到控制檯執行
2.關閉控制檯,再開啟控制檯 就能看到Vue皮膚了
程式碼
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();
缺點
這個方法只是對當前標籤頁有效,就是說,如果你不小心(出於習慣)重新整理了一下頁面,或者有新標籤頁開啟其他路由的需求,就需要重新走一遍上面的步驟。
長期解決方法
在瀏覽器安裝Tampermonkey外掛,推薦用edge瀏覽器
安裝後點開外掛的管理皮膚,新建一個指令碼 貼上下面的程式碼