线上环境如何开启vue devtool

433 阅读1分钟

如何在线上环境开启 vue 的 devtool

  1. 大家都知道 正常线上是无法开启 devtool 的
  2. 今天带来一个小技巧
  3. 将下方代码粘贴到 浏览器控制台中 运行即可 (前提是 浏览器插件中安装了 vue devtool)
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;
  }
}

  1. 然后工具栏就会出现一个 devtool 的选项