在生产环境使用 Vue DevTools

Vue 2 可通过断点拿到 Vue 实例，配置 devtools 为 true 即可。
Vue 2/3 均可通过 DevTools 的 Hook 强制启用。

以下内容仅适用于 Vue 2。
Vue 3 参考：^[1]

缘由

由于 Vue 项目生产环境默认配置如下：

process.env.NODE_ENV === "production";
Vue.config.devtools = false;

导致很多使用 Vue 开发的项目生产环境下无法进行调试。
因此对于生产环境，需要在实例化前修改 Vue.config.devtools 为 true 才能使用 Vue DevTools。

查找 Vue 实例入口

因为需要在实例化前修改 Vue 的 config，所以必须找到 Vue 实例的初始化函数。

本文以游戏 Blue Archive 的国际服官网^[2]为例，该网页使用 Nuxt 编写。Nuxt 是一个基于 Vue 的框架。

不同项目的 JavaScript 入口文件可能不同（如本文例就不是 app.xxx.js），请注意。

访问网页，打开 DevTools，进入“元素”选项卡，查找 Vue 的挂载点（一般为 #app）：
Vue mount 此处挂载点为 #__nuxt

进入“源代码”选项卡，查找 JavaScript 入口文件。可以先查看是否有 app 或 index 等开头的意义明确的文件。

如果没有找到或 JS 文件命名无规律，可以逐个打开，使用 Ctrl + F 查找 Vue 的挂载点。
hash mount 如图所示，右侧框内为挂载相关函数

设置断点并修改配置

找到相关函数后，查找该函数的 new 关键字位置，在关键字前设置断点，按Ctrl + R 或 F5 刷新网页。

刷新后在控制台中将 config.devtools 的值设置为 true。
breakpoints

取消断点，再次打开 DevTools 即可看到 Vue 选项卡。
Vue tab

通过 Hook 强制启用

也可以通过拿到 Vue 基类后配置 DevTools 的 Hook 强制启用^[1:1]，如下：

// 1.在先获取根节点Vue 实例
let el = document.querySelector('#app')||document.querySelector('#__nuxt')
let app = el.__vue__ 

// 2.获取该实例的构造函数 
let Vue = app.constructor 
// 3.获取Vue的基类 
while (Vue.super) { 
    Vue = Vue.super 
} 
// 4.强制开启 
Vue.config.devtools = true 
window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = Vue

参考

部分内容参考^[3]，作者：Frank-Link