# 強制開啟Vue-devtool的方法

### 在一般用vue做的網頁即使瀏覽器偵測到，卻不能進行Devtools檢查，是因為是Vue的生產模式或是設定被關閉

按以下步驟貼在F12 Console下，就能用devtool查看囉!

// 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'

第二行的app 其實就是 Vue 的 class Vue{} 的原型。
此時已可以開啟devtool，但是沒資料。

//取得掛載在#app底下的實例
var app = document.querySelector('#app').__vue__;

//取得實例的建構函式
var Vue = app.constructor;

//取得Vue.config的屬性
var VueSuper = Vue.super;

//修改屬性
Vue.config.devtools = true

__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = Vue

最後重啟F12就可以查看devtool啦!