不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高
打开掘金首页，nuxt 图标亮了起来 🐒
那就借掘金的宝地，记录一下如何在生产环境开启 vue 项目的 Devtools 调试工具。
首先，我们要知道 Vue 调试工具的启动流程
Vue 是怎么开启 Devtools 插件的？
这段是 Vue2 源码的 9095 行左右的代码：
config.devtools 是声明在 Vue 构造函数上的配置项，在开发环境默认值为 true，而在生产环境默认为 false，表示不开启，因此我们平常只能在开发环境上开启调试工具。
🕵️ 不过，聪明的你一定也想到了，开启 Devtools 其实只需要一行关键代码
devtools.emit('init', Vue);
复制代码开启 Devtools 插件的关键代码
理论上，我们只要在浏览器控制台执行这一行代码 devtools.emit('init', Vue);，便能开启 Devtools 插件。但是里面有两个未知因素 -- devtools 和 Vue。
怎样获取 devtools
顺藤摸瓜，我在源码中找到了插件 devtools 对应的全局变量：
打印输出，有 emit 函数可调用
怎么获取 Vue
为什么说 Vue 也是未知因素呢？是因为经过 webpack 打包后代码，其中 Vue 被塞进 chunk 里，不会暴露全局变量了。不过好在每一个由 Vue 组件生成的元素都留了个「后门」-- __vue__，该属性值指向元素的 vue 实例。
通过审查元素，我找到了掘金首页的根元素「<div id="__nuxt">...</div>」
根节点元素的 __vue__ 所指向的vm 实例，正是我们在 main 函数中的 new Vue({...}).$mount(target) 。所以根据 Javascript 原型链法则，可推导出：
若存在
vm = new Vue()，则Vue = vm.constructor
Vue 到手👋。
求解
现在可以将两个未知数代入到这个「方程式」里执行了，下面是控制台要执行的代码 先声明这两个变量：
const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
// 小tips，在控制台 $ 可替代 document.querySelector
// `$('#__nuxt')` 是掘金站点的 root 节点。需要注意的是，不同的项目 root 节点有所不同
const Vue = $('#__nuxt').__vue__.constructor;
复制代码再依次执行：
// 这个也是额外的知识点 @see https://cn.vuejs.org/v2/api/#devtools
Vue.config.devtools = true;
devtools.emit('init', Vue);
复制代码执行之后，需要关闭控制台再重新打开，才能看到出现了 Vue 调试面板。
参考：
