vue项目线上环境开启vue devtools调试
[ 2024/06/16, Vue , 17阅, 0评 ]

vue2版本打开控制台,运行一下以下代码:

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面板了。

vue3版本可尝试以下代码:

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");
}

有朋自远方来...评论一下呗O(∩_∩)O