將已經編譯模式的 Vue 強制開啟 Vue devTools
前言
很多時候我們在某些網站上面看到一些很炫炮的專案,就會想一看究竟,尤其是寫 Vue 的前端工程師會更好奇他是如何規劃模板以及 data 有什麼等等,所以這一邊介紹一下該如何強制開啟 Vue devTools。
Vue devTools
身為一名 Vue 工程師,是一定會安裝一個套件叫做 Vue devTools
那 Vue devTools 最主要是方便我們在開發模式時比較容易排除一些 Bug
剛他檢測到畫面上面有使用 Vue.js 並且是開發者模式的話,那就會跳出一個這個工具畫面
強制開啟 Vue devTools
接下來回到重點,也就是這一篇文章的重點,當我們開發完畢後就會使用 npm run build
打包編譯相關 Vue 檔案,此時這時候 Vue devTools 就會被關閉,那該怎模打開呢?首先先讓我們到 Vue devTools 的開源專案
在開源專案底下作者有提到「Force enable the devtools」
1 | // Before you create app |
基本上這三段你挑第二段 window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor
直接丟進去瀏覽器的 console 執行,並重新打開 devTools 就可以看到 Vue devTools 會被強制打開,但是無法看到相關 Vue 的 data
,這是因為我們沒有正確取得當前網站的 Vue。
在這邊第二段的 app
其實就是 Vue 的 class Vue{}
的原型。
那通常我們 Vue 會掛載在 #app
底下,所以就要這樣取得
1 | var app = document.getElementById('app').__vue__; |
接下來我們要將 app.constructor
儲存起來並透過關鍵的 Vue.super
,拉出來另外儲存。
如果沒有做這個動作是無法設置 Vue.config
的。
1 | var app = document.getElementById('app').__vue__; |
然後要來調整 devTools 狀態
1 | VueSuper.config.devtools = true; |
最後已經拉出來的 Vue 回推給 Vue devTools
1 | window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = VueSuper; |
這樣子你就完成了將編譯模式的 Vue 給強制開啟 Vue devTools,你只需要重新打開網頁開發者工具就可以看到 Vue devTools 已經被你打開啦~
以下為完整程式碼
1 | var app = document.getElementById('app').__vue__; |
雖然絕大部分都是參考這一篇文章 为构建后的Vue应用强制开启Vue Devtools,但自己寫過一次之後就可以知道一件事情「前端就是 Open Source」QQ。