开启vue项目生产环境的 Vue Devtools

3,614 阅读1分钟

前言

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

image.png

image.png

image.png

获取 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

image.png

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句代码,记得重新打开控制台(不是刷新页面)