摘要：使用调试线上前端错误前言目前所在的公司每次部署上线至少半小时，如果在上线刚完成，检查线上发现有时，这意味着你又要等一次部署，尤其是接近下班的时候出这事的话，整个人都不好了。
使用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版本的资源了，这样一些在线上才能复现的问题，很容易在本地调试了。
下图是原本线上的代码
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85171.html
摘要：安装完之后查看版本命令行输入显示错误，这是因为操作系统不支持使用这个命令，我们可以使用或代替。发现需证书有问题，我们还需要安装提供的证书，要不抓包失败。安装证书浏览器输入然后根据你的手机系统进行安装即可。 mitmproxy 是一款工具，也可以说是 python 的一个包，在命令行操作的工具。 MITM 即中间人攻击（Man-in-the-middle attack） showImg(...
摘要：移动端应用一般都运行在微信浏览器中中手机浏览器中。因为微信浏览器是定制的浏览器，一般的远程调试方式都不可用，需要配合特定的工具，如微信开发者工具。 前端如何高效的与后端协作开发 1. 前后端分离 前端与后端的分离，能使前端的开发脱离后端的开发模式，拥有更大的自由度，以此便可做前端工程化、组件化、单页面应用等。 可以参考：前后端分离、web与static服务器分离 2. 尽量避免后端模板...
摘要：移动端应用一般都运行在微信浏览器中中手机浏览器中。因为微信浏览器是定制的浏览器，一般的远程调试方式都不可用，需要配合特定的工具，如微信开发者工具。 前端如何高效的与后端协作开发 1. 前后端分离 前端与后端的分离，能使前端的开发脱离后端的开发模式，拥有更大的自由度，以此便可做前端工程化、组件化、单页面应用等。 可以参考：前后端分离、web与static服务器分离 2. 尽量避免后端模板...
阅读 2862·2021-07-30 15:30
阅读 559·2019-08-30 15:55
阅读 1625·2019-08-26 17:04
阅读 636·2019-08-26 11:36
阅读 2068·2019-08-26 10:58
阅读 3553·2019-08-23 14:34
阅读 1559·2019-08-22 18:48
阅读 2525·2019-08-21 17:51
