前言

在日常開(kāi)發(fā)中,不知道你們是否遇到過(guò)這樣的場(chǎng)景

在本地測(cè)試開(kāi)發(fā) vue 組件的時(shí)候非常順暢

一上生產(chǎn)環(huán)境,客戶(hù)說(shuō)數(shù)據(jù)展示錯(cuò)誤,樣式不對(duì)...

但是你在本地測(cè)試了幾次,都難以復(fù)現(xiàn)

定位方向

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

但是新問(wèn)題又來(lái)了,線(xiàn)上環(huán)境我們?nèi)绾伍_(kāi)啟 vue devtools 呢？

案例演示

讓我們以 element-ui 官網(wǎng)為例

先看下此時(shí)的 chrome devtools 是沒(méi)有 Vue 的選項(xiàng)卡的

?

一段神奇的代碼

其實(shí)很簡(jiǎn)單,我們只需要打開(kāi)控制臺(tái),運(yùn)行一下以下代碼

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

證明我們已經(jīng)成功開(kāi)啟了 vue devtools

功能驗(yàn)證

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

我們會(huì)發(fā)現(xiàn)此時(shí)多了一個(gè) Vue 選項(xiàng)卡,功能也和我們本地調(diào)試一樣使用

對(duì)于遇到 vue 線(xiàn)上問(wèn)題調(diào)試,真的非常好用!

vue3

最近無(wú)意間又看到了這段代碼,適配 vue3 親測(cè) 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");
}