这个线上Vue调试技巧太实用了 转载

转自：https://mp.weixin.qq.com/s/dG691i7FLFOviToKnPi-SQ

对于线上环境，一般会禁用Vue调试工具，之前介绍过一个通过Chrome Overrides来修改源代码的方式可以实现线上环境也能开启Vue调试工具（这个 Chrome 调试技巧太实用了），但是相对还是比较麻烦。有没有更简单的方案？Vue调试工具其实是有一些钩子可以在控制台调用的，具体可以参考Vue devtools的源代码。可以通过

window.__VUE_DEVTOOLS_GLOBAL_HOOK__ 来调用。

调用emit方法可以来初始化，进而激活开发者工具，不过要注意Vue2和Vue3的初始化稍有差别，下面来举例说明。找一个Vue2的网站来做示范，这里以juejin.cn为例，打开后默认是看不到Vue调试面板的。这时候在控制台输入，注意执行前要先选中Vue实例根节点作为$0。

vue2=$0.__vue__.$options._basevue2.config.devtools=truewindow.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init',vue2)

执行后，不要刷新页面，重新打开开发者工具，就能看到Vue调试tab了。
对于Vue3网站，这里以Vue的官方网站（cn.vuejs.org）做示范。在控制台执行下面的代码，同样的执行前要先选中Vue实例根节点作为$0。

vue3 = $0.__vue_app__;window.__VUE_DEVTOOLS_GLOBAL_HOOK__.enabled = true;window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit(  "app:init",  vue3,  vue3.version,  {    Comment: Symbol("Comment"),    Fragment: Symbol("Fragment"),    Static: Symbol("Static"),    Text: Symbol("Text"),  })

执行后再打开开发者工具就可以看到Vue调试工具了。怎么区分是Vue2网站，还是Vue3网站，可以通过实例根节点的属性来区分。Vue2是__vue__，Vue3是__vue_app__。