將已經編譯模式的 Vue 強制開啟 Vue devTools

前言

很多時候我們在某些網站上面看到一些很炫炮的專案，就會想一看究竟，尤其是寫 Vue 的前端工程師會更好奇他是如何規劃模板以及 data 有什麼等等，所以這一邊介紹一下該如何強制開啟 Vue devTools。

Vue devTools

身為一名 Vue 工程師，是一定會安裝一個套件叫做 Vue devTools

Chrome：下載
Firefox：下載

那 Vue devTools 最主要是方便我們在開發模式時比較容易排除一些 Bug

剛他檢測到畫面上面有使用 Vue.js 並且是開發者模式的話，那就會跳出一個這個工具畫面

強制開啟 Vue devTools

接下來回到重點，也就是這一篇文章的重點，當我們開發完畢後就會使用 npm run build 打包編譯相關 Vue 檔案，此時這時候 Vue devTools 就會被關閉，那該怎模打開呢？首先先讓我們到 Vue devTools 的開源專案

在開源專案底下作者有提到「Force enable the devtools」

1
2
3
4
5
6
7
8

// Before you create app
Vue.config.devtools = process.env.NODE_ENV === 'development'

// After you create app
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app.constructor

// then had to add in ./store.js as well.
Vue.config.devtools = process.env.NODE_ENV === 'development'

基本上這三段你挑第二段 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
2
3

var app = document.getElementById('app').__vue__;
var Vue = app.constructor;
var VueSuper = Vue.super;

然後要來調整 devTools 狀態

1

VueSuper.config.devtools = true;

最後已經拉出來的 Vue 回推給 Vue devTools

1

window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = VueSuper;

這樣子你就完成了將編譯模式的 Vue 給強制開啟 Vue devTools，你只需要重新打開網頁開發者工具就可以看到 Vue devTools 已經被你打開啦~

以下為完整程式碼

1
2
3
4
5

var app = document.getElementById('app').__vue__;
var Vue = app.constructor;
var VueSuper = Vue.super;
VueSuper.config.devtools = true;
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = VueSuper;

雖然絕大部分都是參考這一篇文章 为构建后的Vue应用强制开启Vue Devtools，但自己寫過一次之後就可以知道一件事情「前端就是 Open Source」QQ。

參考文獻

• 为构建后的Vue应用强制开启Vue Devtools