資訊專欄INFORMATION COLUMN
摘要：使用調試線上前端錯誤前言目前所在的公司每次部署上線至少半小時，如果在上線剛完成，檢查線上發現有時，這意味著你又要等一次部署，尤其是接近下班的時候出這事的話，整個人都不好了。
使用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版本的資源了，這樣一些在線上才能復現的問題，很容易在本地調試了。
下圖是原本線上的代碼
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85171.html
摘要：安裝完之后查看版本命令行輸入顯示錯誤，這是因為操作系統不支持使用這個命令，我們可以使用或代替。發現需證書有問題，我們還需要安裝提供的證書，要不抓包失敗。安裝證書瀏覽器輸入然后根據你的手機系統進行安裝即可。 mitmproxy 是一款工具，也可以說是 python 的一個包，在命令行操作的工具。 MITM 即中間人攻擊（Man-in-the-middle attack） showImg(...
摘要：移動端應用一般都運行在微信瀏覽器中中手機瀏覽器中。因為微信瀏覽器是定制的瀏覽器，一般的遠程調試方式都不可用，需要配合特定的工具，如微信開發者工具。 前端如何高效的與后端協作開發 1. 前后端分離 前端與后端的分離，能使前端的開發脫離后端的開發模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應用等。 可以參考：前后端分離、web與static服務器分離 2. 盡量避免后端模板...
摘要：移動端應用一般都運行在微信瀏覽器中中手機瀏覽器中。因為微信瀏覽器是定制的瀏覽器，一般的遠程調試方式都不可用，需要配合特定的工具，如微信開發者工具。 前端如何高效的與后端協作開發 1. 前后端分離 前端與后端的分離，能使前端的開發脫離后端的開發模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應用等。 可以參考：前后端分離、web與static服務器分離 2. 盡量避免后端模板...
閱讀 2858·2021-07-30 15:30
閱讀 553·2019-08-30 15:55
閱讀 1621·2019-08-26 17:04
閱讀 632·2019-08-26 11:36
閱讀 2064·2019-08-26 10:58
閱讀 3548·2019-08-23 14:34
閱讀 1557·2019-08-22 18:48
閱讀 2522·2019-08-21 17:51
