使用MITM调试在线前端错误等待部署，尤其是临近工作结束时出现这种情况，整个人的心情都会很糟糕。首先，网上的前端代码是压缩+混淆的，没有sourceMap（即使有map，有时候也不好调试），所以很多时候看到问题只能靠猜怎么了。这时候如果我能把网上的css和js文件换成我本地的dev模式打包文件，调试效率会大大提高，但是运维当然不会给你在线调试的权限，整个页面都崩了该怎么办？于是想到了中间人攻击来替换我本地浏览器请求的资源，既不污染服务器，又方便我调试，两全其美。火车线上的模块页面主要依赖两个文件，js和css文件。只要能把浏览器对线上静态文件的请求转发到我本地机器上，就可以实现在线实时调试。简单的说，就是利用Chrome的代理工具，把我们所有的流量都转发到本地的代理服务器上。这个代理服务器会匹配url，修改和过滤请求。准备工具ProxySwitchyOmegaanyproxy，开始安装anyproxycnpmianyproxy@beta4这里需要注意的是，我们需要更换的是https的资源，首先要在本地导入自己的CA。这是一个教程。先在本地搭建一个代理服务器，anyproxy已经帮我们做了其他的工作，我们只需要编写规则文件即可，我的配置文件如下//rules.jsconstresRegx=/\.[a-z0-9]{8}.min/imodule.exports={summary:'修改响应的规则',*beforeSendRequest(requestDetail){let{headers,path}=requestDetail.requestOptionsif(path.match(/raven\.min\.js|analytics\.js|nr-\d+/)){//屏蔽无用资源return{response:{statusCode:404,header:{'content-type':'text/html'},body:''}}}//hook静态资源CDNif(requestDetail.url.indexOf('https://mcache.xxxx.cn/')!==-1){if(path.match(/legacy-vendor/))returnnull//第三方库不参与//common-chunk.abcd1234.min.js===>common-chunk.dev.jsletlocalPath=path.replace(resRegx,'.dev')varnewOption=Object.assign({},requestDetail.requestOptions,{主机名:'192.168.33.10',//localipport:80,path:localPath,headers:{...headers,host:'192.168.33.10'}});返回{协议：'http'，requestOptions：newOption}；}},};启动代理服务器anyproxy--intercept--rulerules.js访问网上代码，结果如下图，我们发现网上的js文件已经被我本地dev版的资源替换了，所以一些只能在线复现的问题，本地调试很方便。下图是网上的原始代码。
