前言
前端使用 Vue.js 开发 UI 的靓仔应该对 vue-devtool 都不会陌生，但是偏偏这样一个小工具其实还蕴含着不少可以挖掘的小细节，例如 vue-devtools 具体是怎么开启启用的以及 vue-devtool 有一个能够打开当前定位的组件源码的功能，因为网络上也有不少相关的具体源码分析文章，这里主要还是算入门科普贴，就不去详细研究底层源码实现。
一、生产环境开启 devtools 调试
很多 Vue.js 框架使用者都是在开发run dev环境里使用 vue-devtools，到了生产环境因为环境变量的设置与代码压缩混淆，基本是不会再使用 vue-devtools 进行页面 vue 代码的调试了。但是其实生产环境也是能够通过一些 hack 的操作进行 vue-tools 的开启，从而进行对 Vue 页面进行调试，方便我们能够在正式生产环境重现、定位问题。
获取 Vue 实例
首先要知道项目的 Vue.js 所挂载的节点（这里这个例子以掘金网站为例子，让大家能够一边看着掘金文章一边进行实操哈哈哈哈。
我们能够看到掘金网页是使用 Nuxt.js 构建的，因此 Vue.js 挂载的节点就是这个 id 为 __nuxt 的节点了。因此我们能够通过下面的代码获取到挂载在 __nuxt 节点上面的 Vue.js 的实例。
const VueObj = document.querySelector('#__nuxt').__vue__.__proto__.__proto__.constructor
开启 Vue 实例的 devtool 配置 -- 调试模式
通过上面一步拿到 Vue 实例后可以通过下面代码设置其类属性 devtools 为调试模式。
VueObj.config.devtools = true
当然开启了调试还没完，因为浏览器插件还没接收到此时开启了调试模式的 Vue 实例消息，也还是未能开启 vue-devtools 进行对 Vue 项目进行调试。
通知浏览器 Vue-devtools 插件调试开始
安装了 Vue-devtools 插件后会在浏览器网页的 window 对象当中注入__VUE_DEVTOOLS_GLOBAL_HOOK__对象，因此我们能够利用这个对象进行通知 Vue-devtools 插件进行开始调试工作。
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', VueObj)
好了，经过一连串的骚操作后我们终于成功在生产环境的网页当中开启了 vue-devtools，能够愉快的在生产环境的进行对 Vue 项目进行调试了。
二、vue-devtools 打开对应组件
虽然不少人都使用过 vue-devtools 插件，但是 devtools 的这个能够在编辑器中直接打开当前定位的组件的小功能普及面感觉还不够广泛，个人感觉这是一个极其实用的一个功能，因此也放在这里讲一下这个这么好玩，能提效的功能。
如何使用：
极其简单，就是直接点击这个 target 就阔以了。
无法打开组件代码文件情况：
确认能够通过命令行进行打开编辑器
这里以 VSCode 为例子，如果你的命令行本身就不能运行 code 等命令打开编辑器，那肯定是报错的。这时需要把 VSCode 添加到命令行终端中，打开 VSCode 工具面板输入 shell 关键字。
