前言

在日常開發中,不知道你們是否遇到過這樣的場景

在本地測試開發 vue 組件的時候非常順暢

一上生產環境,客戶說數據展示錯誤,樣式不對...

但是你在本地測試了幾次,都難以復現

定位方向

這時候作為老 vuer,自然就想到了 vue devtools

但是新問題又來了,線上環境我們如何開啟 vue devtools 呢？

案例演示

讓我們以 element-ui 官網為例

先看下此時的 chrome devtools 是沒有 Vue 的選項卡的

?

一段神奇的代碼

其實很簡單,我們只需要打開控制臺,運行一下以下代碼

var 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);
        console.log("==> vue devtools now is enabled");
      }
    }
    break;
  }
}

顯示 vue devtools now is enabled

證明我們已經成功開啟了 vue devtools

功能驗證

然后再重啟一下 chrome devtool 看下效果

我們會發現此時多了一個 Vue 選項卡,功能也和我們本地調試一樣使用

對于遇到 vue 線上問題調試,真的非常好用!

vue3

最近無意間又看到了這段代碼,適配 vue3 親測 vben 能用 

https://vben.vvbin.cn/#/login?redirect=/dashboard

const el = document.querySelector('#app')
const  vm = el.__vue_app__

window.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.push({
    app: vm,
    version: vm.version,
    types: {
      Comment: Symbol("Comment"),
      Fragment: Symbol("Fragment"),
      Static: Symbol("Static"),
      Text: Symbol("Text"),
    },
})
if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
    window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", vm);
    console.log("==> vue devtools now is enabled");
}