vue生產環境如何開啟 devtools

一、Vue2 專案

1、開啟控制檯，輸入下列程式碼，回車執行

let Vue, walker, node;
walker = document.createTreeWalker(document.body, 1);
while ((node = walker.nextNode())) {
	if (node.__vue__) {
		Vue = node.__vue__.$options._base;
		if (!Vue.config.devtools) {
			Vue.config.devtools = true;
			if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
				window.__VUE_DEVTOOLS_GLOBAL_HOOK__().emit("init", Vue);
			}
		}
		break;
	}
}
 

2、關閉控制檯，再開啟控制檯，就有了 （注意不要重新整理頁面）

解釋： Vue 專案的根節點(一般是#app)上暴露著例項物件 __vue__ ，通過它可以獲取到例項的建構函式，我們將建構函式上的 config.devtools 設定為 true。但這還不夠，Vue 官方文件對 devtools 這樣註釋：務必在載入 Vue 之後，立即同步設定以下內容（Vue.config.devtools = true）。很明顯 new Vue({})已經執行，所以我們的配置並沒有生效。這時候就需要用到 devtools 提供的屬性 __VUE_DEVTOOLS_GLOBAL_HOOK__，該屬性暴露在 window 中。通過 window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init',Vue)來觸發 devtools 初始化。（檢視 Vue、Vuex 的原始碼發現它們也是通過該方法觸發 devtools 初始化）。

二、Vue3 專案

1、開啟控制檯，輸入下列程式碼，回車執行

let vue, node, walker;
walker = document.createTreeWalker(document.body, 1);
while ((node = walker.nextNode())) {
	if (node.__vue_app__) {
		vue = node.__vue_app__;
		if (!vue.config.devtools) {
			vue.config.devtools = true;
			if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
				window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", vue);
			}
		}
		break;
	}
}
 

2、關閉控制檯，再開啟控制檯，就有了 （注意不要重新整理頁面）

解釋： Vue3開啟的思路和Vue2很相似。但是這裡少了找建構函式的步驟，拿到例項後直接改配置config.devtools = true ，再通過emit方法觸發init就可以啟動devtools了。甚至傳入的引數是例項而非建構函式。這裡面的原理我還沒參透，有知道的可以留言，謝謝啦。