前言

不知大家在生产环境或者测试环境中遇到bug，但是不能开启Vue Devtools，尤其遇到校验时无法临时跳过，为调试增加了不少麻烦。本文为大家提供一种思路，仅供参考（试验了自己的几个项目、掘金、vue官网等）

获取 Vue Devtools 对应的全局变量(第一行)

这个代码可以在 vue 源码中找到，有兴趣的同学可以查找一下，源码文件路径/src/core/util/env.js

const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__

// 部分核心源码
// detect devtools
export const devtools = inBrowser && window.__VUE_DEVTOOLS_GLOBAL_HOOK__

获取项目中 Vue 实例(第二行)

这里举例的项目是挂在到 #app 上的，跟具体项目自行调整
原型链的查找就不做过多解释，具体环境自行分析
$：在控制台中 $符号 等价于 document.querySelector

const Vue = $('#app').__vue__.__proto__.__proto__.constructor

万事具备，只欠东风(第三、四行)

先上代码

Vue.config.devtools = true
devtools.emit('init', Vue)

devtools.emit('init', Vue): 这个方法是开启Vue Devtools的关键，同样感兴趣的同学可以去vue源码中查看,源码文件路径/src/platforms/web/runtime/index.js

// 部分核心源码
// devtools global hook
if (config.devtools) {
  if (devtools) {
    devtools.emit('init', Vue)
  } else if (
    process.env.NODE_ENV !== 'production' &&
    process.env.NODE_ENV !== 'test'
  ) {
    console[console.info ? 'info' : 'log'](
      'Download the Vue Devtools extension for a better development experience:\n' +
      'https://github.com/vuejs/vue-devtools'
    )
  }
}

全部代码(注意id选择器和原型链的查找)

const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
const Vue = $('#app').__vue__.__proto__.__proto__.constructor
Vue.config.devtools = true
devtools.emit('init', Vue)

执行完上述4句代码，记得重新打开控制台（不是刷新页面）

评论区有大神推荐chrome插件：vue-force-dev（亲测有效，vue2、3都支持）