如何在生产环境调试Vue

vue 生产环境是无法启用vue devtools的。

先说下vue如何判断devtools是否可用的。

vue devtools扩展组件会在window全局注入__VUE_DEVTOOLS_GLOBAL_HOOK__变量。只要你启用这个扩展组件，任意页面都可以看到这个属性。

vue根实例初始化之前判断Vue.config.devtools是否为true。若为true，则调用window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit('init', Vue)方法初始化调试面板。

入门方法

如何使用 Vue Devtools 调试Vue线上项目一文简单讲解了如何通过加断点的方式调试vue项目。原理就是，在断点的位置，chrome devtool的作用域为当前作用域，你可以在console面板对当前作用域的变量进行任何操作。

这里有个类似的方式，但是更简单。

1.在source中找到包含vue源码的文件

通过搜索devtools定位到以下位置。

其中，P就是Vue.config,te就是window.__VUE_DEVTOOLS_GLOBAL_HOOK__。因为这俩变量是代码混淆压缩后的命名，所以你的项目可能是另外一种命名。

注意，代码可以通过pretty格式化： 点击这里：

格式化之后的代码不影响你加断点调试。

2. 加断点

在上一步高亮行加断点，加断点后刷新页面，代码停留在断点位置。此时在console中修改devtools：

3. 关闭chrome devtool，再打开

再打开就可以看到Vue面板了。

缺点

这个方法只是对当前标签页有效，就是说，如果你不小心（出于习惯）刷新了一下页面，或者有新标签页打开其他路由的需求，就需要重新走一遍上面的步骤。

中级用法

一劳永逸的办法就是，直接针对你的目标文件改代码。以fiddler为例说明。

1. 安装fiddler

如果你的线上资源是https协议的，需要下载fiddler证书并安装。

2. 自定义拦截重写代码规则

以上保存之后，刷新页面即可调试。

以下是代码：

static function OnBeforeResponse(oSession: Session) {
    if (m_Hide304s && oSession.responseCode == 304) {
        oSession["ui-hide"] = "true";
    }
	   // my code begin
	   if (oSession.url == 'your.domain/static/js/1.42309921c134e997dc82.js'){
			    oSession.utilDecodeResponse();
			    oSession.utilReplaceInResponse('devtools:!1','devtools: 1');
		  }
		// my code end
}

注意：请打开Network面板下的 Disable cache功能，以下内容同理。

关于fiddler Customize Rules

Customize Rules可以从代码层面自定义拦截规则。

主要的拦截钩子有2个

• OnBeforeRequest：请求发出前
• OnBeforeResponse：请求返回给客户端应用前

Customize Rules本身是一个js文件，文件中所有数据类型的属性和方法在编辑窗口右边都有准确的说明：

更多简单示例参考ModifyRequestOrResponse

高级用法

Customize Rules虽然有用，不过这个配置毕竟是针对全局的，如果你写的过滤器不够具体，且使用完忘记删除，将来拦截到意料之外的请求可能会导致你比较困扰。

可能你以为AutoResponder只能修改返回码，修改/新增头部信息，延迟，重定向到第三方地址或者本地文件。

实际上你可以直接对拦截结果进行修改，然后将修改后的结果添加到的Rules：

这个方法的好处就是，省略了将文件保存在本地->修改本地文件->为新建规则选择本地文件的过程

总结

• 简单调试可以直接源码加断点，并在断点位置修改devtools值
• 更好的调试体验，可以利用Fiddler Customize Rules自定义拦截并修改代码
• 体验好、又简单的办法就是用Fiddler的response编辑功能直接编辑返回内容，并将其添加到AutoResponder中