Vue2/Vue3 项目生产环境开启 vue devtools 插件线上调试 vue 组件

说到 vue 项目的调试工具，必然少不了 “vue devtools 插件”，此插件就像“手术刀”一样，是开发环境下的一个利器，生产环境一般情况没办法使用。

要在生产环境使用，就必须要一点手段。

前置条件

1. 安装 Chrome 浏览器，本文编写时使用的 Google Chrome 133 版本。
2. 安装 vue devtools 插件，本文编写时使用的 vue devtools 6.6.3 版本（Vue DevTools v7 不再支持 vue2 项目调试）。

Vue2 项目开启 vue devtools

以 element-ui 为例：

1. Chrome 访问 https://element.eleme.cn/#/zh-CN。

2. 快捷键 F12 启动 开发者工具。

3. 在 控制台 运行以下代码：

var node;
const walker = document.createTreeWalker(document.body,1);
while ((node = walker.nextNode())) {
  if (node.__vue__) {
    const 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 页面，看不到 vue devtools。比如：

这种情况， 按两次 F12 将 开发者工具 重启下就能解决。

Vue3 项目开启 vue devtools

以 element-plus 为例：

1. Chrome 访问 https://cn.element-plus.org/zh-CN/component/overview.html。

2. 快捷键 F12 启动 开发者工具。

3. 在 控制台 运行以下代码：

var node;
const walker = document.createTreeWalker(document.body,1);
while ((node = walker.nextNode())) {
  const vm = node.__vue_app__
  if (vm) {
    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');
    }
    break;
  }
}

正常情况，会看到如下图：

有些报错，可以忽略。

也可能会代码执行成功，不出现 Vue 页签，还是按两次 F12 将 开发者工具 重启下就能解决。

使用 Chrome Snippets 保存代码片段

1. 启动开发者工具

2. 前往 Sources(源代码/来源) 面板

3. 找到 Snippets(代码段)

4. 新增片段 New snippet(新代码段)

5. 输入以下代码，Ctrl + S 保存

6. 对代码片段鼠标右键，再点击 Run(运行) 即可执行。

function init() {
  var node;
  var running = false
  try {
    const walker = document.createTreeWalker(document.body,1);
    while ((node = walker.nextNode())) {
      const vm = node.__vue_app__
      if (vm) {
        // Vue3 项目
        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);
          running = true
        }
        break;
      } else if (node.__vue__) {
        // Vue2 项目
        const 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);
            running = true
          }
        }
        break;
      }
    }
  } catch(err){
    console.error(err)
  }
  if (running) {
    console.log('%c==> 已开启 vue devtools (可能需要重启 Chrome 开发者工具)', 'color: green;');
  } else {
    console.log('%c==> 未检测到 Vue 项目或未检测到 Vue devtools', 'color: red;')
  }
}
init()

这里保存的 Snippets 代码片段，可以在所有网站运行，只要浏览器不卸载，Snippets 代码片段判断永远都在。