使用MITM调试线上前端错误

使用MITM调试线上前端错误

前言

目前所在的公司每次部署上线至少半小时，若是在上线刚完成，检查线上发现有bug时，这意味着你又要等一次部署，尤为是接近下班的时候出这事的话，整我的都很差了。

首先线上的前端代码都是压缩+混淆过的，加上没有sourceMap（即便有map有时也很差调试），致使不少时候看到问题只能靠猜是哪里不对。这个时候若是能把线上的css、js文件替换成我本地的dev模式打包的文件，那将极大的提升debug效率，可是运维固然不会给你权限在线上调试啦，整个页面崩了怎么办？因而我想到了中间人攻击的方式来替换我本地浏览器请求的资源，这样不会污染服务器，又能够方便我调试，一箭双鵰。

思路

线上的模块页面主要依赖两个文件，js和css文件，只要能把浏览器对线上这静态文件的请求转发到我本机，就能够实现线上实时调试了。
简单来讲就是使用Chrome的代理工具，把咱们全部的流量转发到本地的一个代理服务器，这个代理服务器会匹配url，对请求进行修改和过滤。

准备工具

Proxy SwitchyOmega
anyproxy

开始动手

安装anyproxy

cnpm i anyproxy@beta4

这里要注意的是，咱们须要替换的是https的资源，要先在本地导入本身的CA，这里有教程。

先在本地搭建一个代理服务器，anyproxy已经帮咱们完成了其余的工做，咱们只须要编写rule文件便可，个人配置的文件以下

// rules.js
const resRegx = /\.[a-z0-9]{8}.min/i

module.exports = {
    summary: 'a rule to modify response',
    * beforeSendRequest(requestDetail) {
        let {headers, path} = requestDetail.requestOptions
        if (path.match(/raven\.min\.js|analytics\.js|nr-\d+/)) { // 屏蔽无用资源
            return {
                response: {
                    statusCode: 404,
                    header: {'content-type': 'text/html'},
                    body: ''
                }
            }
        }

        // hook 静态资源CDN
        if (requestDetail.url.indexOf('https://mcache.xxxx.cn/') !== -1) {

            if (path.match(/legacy-vendor/)) return null // 第三方库不参与
            // common-chunk.abcd1234.min.js ===> common-chunk.dev.js
            let localPath = path.replace(resRegx, '.dev')
            var newOption = Object.assign({}, requestDetail.requestOptions, {
                hostname: '192.168.33.10', // 本机ip
                port: 80,
                path: localPath,
                headers: {...headers, host: '192.168.33.10'}
            });
            return {
                protocol: 'http',
                requestOptions: newOption
            };
        }
    },
  
};

启动proxy服务器

anyproxy --intercept --rule rules.js

访问线上代码，结果以下图，咱们发现线上的js文件已经替换成我本地的dev版本的资源了，这样一些在线上才能复现的问题，很容易在本地调试了。

下图是本来线上的代码