資訊專欄INFORMATION COLUMN
摘要：使用調(diào)試線上前端錯誤前言目前所在的公司每次部署上線至少半小時，如果在上線剛完成，檢查線上發(fā)現(xiàn)有時，這意味著你又要等一次部署，尤其是接近下班的時候出這事的話，整個人都不好了。
使用MITM調(diào)試線上前端錯誤 前言
目前所在的公司每次部署上線至少半小時，如果在上線剛完成，檢查線上發(fā)現(xiàn)有bug時，這意味著你又要等一次部署，尤其是接近下班的時候出這事的話，整個人都不好了。
首先線上的前端代碼都是壓縮+混淆過的，加上沒有sourceMap（即使有map有時也不好調(diào)試），導(dǎo)致很多時候看到問題只能靠猜是哪里不對。這個時候如果能把線上的css、js文件替換成我本地的dev模式打包的文件，那將極大的提高debug效率，但是運維當然不會給你權(quán)限在線上調(diào)試啦，整個頁面崩了怎么辦？于是我想到了中間人攻擊的方式來替換我本地瀏覽器請求的資源，這樣不會污染服務(wù)器，又可以方便我調(diào)試，兩全其美。
思路線上的模塊頁面主要依賴兩個文件，js和css文件，只要能把瀏覽器對線上這靜態(tài)文件的請求轉(zhuǎn)發(fā)到我本機，就可以實現(xiàn)線上實時調(diào)試了。
簡單來說就是使用Chrome的代理工具，把我們所有的流量轉(zhuǎn)發(fā)到本地的一個代理服務(wù)器，這個代理服務(wù)器會匹配url，對請求進行修改和過濾。
Proxy SwitchyOmega
anyproxy
安裝anyproxy
cnpm i anyproxy@beta4
這里要注意的是，我們需要替換的是https的資源，要先在本地導(dǎo)入自己的CA，這里有教程。
先在本地搭建一個代理服務(wù)器，anyproxy已經(jīng)幫我們完成了其他的工作，我們只需要編寫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 靜態(tài)資源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服務(wù)器
anyproxy --intercept --rule rules.js
訪問線上代碼，結(jié)果如下圖，我們發(fā)現(xiàn)線上的js文件已經(jīng)替換成我本地的dev版本的資源了，這樣一些在線上才能復(fù)現(xiàn)的問題，很容易在本地調(diào)試了。
下圖是原本線上的代碼
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85171.html
摘要：安裝完之后查看版本命令行輸入顯示錯誤，這是因為操作系統(tǒng)不支持使用這個命令，我們可以使用或代替。發(fā)現(xiàn)需證書有問題，我們還需要安裝提供的證書，要不抓包失敗。安裝證書瀏覽器輸入然后根據(jù)你的手機系統(tǒng)進行安裝即可。 mitmproxy 是一款工具，也可以說是 python 的一個包，在命令行操作的工具。 MITM 即中間人攻擊（Man-in-the-middle attack） showImg(...
摘要：移動端應(yīng)用一般都運行在微信瀏覽器中中手機瀏覽器中。因為微信瀏覽器是定制的瀏覽器，一般的遠程調(diào)試方式都不可用，需要配合特定的工具，如微信開發(fā)者工具。 前端如何高效的與后端協(xié)作開發(fā) 1. 前后端分離 前端與后端的分離，能使前端的開發(fā)脫離后端的開發(fā)模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應(yīng)用等。 可以參考：前后端分離、web與static服務(wù)器分離 2. 盡量避免后端模板...
摘要：移動端應(yīng)用一般都運行在微信瀏覽器中中手機瀏覽器中。因為微信瀏覽器是定制的瀏覽器，一般的遠程調(diào)試方式都不可用，需要配合特定的工具，如微信開發(fā)者工具。 前端如何高效的與后端協(xié)作開發(fā) 1. 前后端分離 前端與后端的分離，能使前端的開發(fā)脫離后端的開發(fā)模式，擁有更大的自由度，以此便可做前端工程化、組件化、單頁面應(yīng)用等。 可以參考：前后端分離、web與static服務(wù)器分離 2. 盡量避免后端模板...
閱讀 2869·2021-07-30 15:30
閱讀 563·2019-08-30 15:55
閱讀 1634·2019-08-26 17:04
閱讀 644·2019-08-26 11:36
閱讀 2085·2019-08-26 10:58
閱讀 3565·2019-08-23 14:34
閱讀 1567·2019-08-22 18:48
閱讀 2536·2019-08-21 17:51
