如何打开掘金的 Vue Devtools？打开掘金首页，nuxt 图标亮了起来 🐒 。那就借掘金的宝地，记录一下如何在

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高

打开掘金首页，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 调试面板。

参考：