使用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版本的資源了，這樣一些在線上才能復現的問題，很容易在本地調試了。

下圖是本來線上的代碼