资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/使用MITM调试线上前端错误

使用MITM调试线上前端错误

高璐 / 1015人阅读

摘要：使用调试线上前端错误前言目前所在的公司每次部署上线至少半小时，如果在上线刚完成，检查线上发现有时，这意味着你又要等一次部署，尤其是接近下班的时候出这事的话，整个人都不好了。

使用MITM调试线上前端错误 前言

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

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

思路

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

准备工具

Proxy SwitchyOmega
anyproxy

开始动手

安装anyproxy

</>复制代码 
  1. cnpm i anyproxy@beta4

这里要注意的是，我们需要替换的是https的资源，要先在本地导入自己的CA，这里有教程。

先在本地搭建一个代理服务器，anyproxy已经帮我们完成了其他的工作，我们只需要编写rule文件即可，我的配置的文件如下

</>复制代码 
  1. // rules.js
  2. const resRegx = /.[a-z0-9]{8}.min/i
  3. module.exports = {
  4.     summary: "a rule to modify response",
  5.     * beforeSendRequest(requestDetail) {
  6.         let {headers, path} = requestDetail.requestOptions
  7.         if (path.match(/raven.min.js|analytics.js|nr-d+/)) { // 屏蔽无用资源
  8.             return {
  9.                 response: {
  10.                     statusCode: 404,
  11.                     header: {"content-type": "text/html"},
  12.                     body: ""
  13.                 }
  14.             }
  15.         }
  16.         // hook 静态资源CDN
  17.         if (requestDetail.url.indexOf("https://mcache.xxxx.cn/") !== -1) {
  18.             if (path.match(/legacy-vendor/)) return null // 第三方库不参与
  19.             // common-chunk.abcd1234.min.js ===> common-chunk.dev.js
  20.             let localPath = path.replace(resRegx, ".dev")
  21.             var newOption = Object.assign({}, requestDetail.requestOptions, {
  22.                 hostname: "192.168.33.10", // 本机ip
  23.                 port: 80,
  24.                 path: localPath,
  25.                 headers: {...headers, host: "192.168.33.10"}
  26.             });
  27.             return {
  28.                 protocol: "http",
  29.                 requestOptions: newOption
  30.             };
  31.         }
  32.     },
  33.   
  34. };

启动proxy服务器

</>复制代码 
  1. anyproxy --intercept --rule rules.js

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

下图是原本线上的代码

GPU云服务器 云服务器 gta5线上模式云服务器错误 asp调试错误信息 前端调试 php调试不显示错误

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85171.html

相关文章

  • 安装mitmproxy以及遇到的坑和简单用法

    摘要：安装完之后查看版本命令行输入显示错误，这是因为操作系统不支持使用这个命令，我们可以使用或代替。发现需证书有问题，我们还需要安装提供的证书，要不抓包失败。安装证书浏览器输入然后根据你的手机系统进行安装即可。 mitmproxy 是一款工具，也可以说是 python 的一个包，在命令行操作的工具。 MITM 即中间人攻击（Man-in-the-middle attack） showImg(...

    baoxl 评论0 收藏0

  • 前端如何高效的与后端协作开发

    摘要：移动端应用一般都运行在微信浏览器中中手机浏览器中。因为微信浏览器是定制的浏览器，一般的远程调试方式都不可用，需要配合特定的工具，如微信开发者工具。 前端如何高效的与后端协作开发 1. 前后端分离 前端与后端的分离，能使前端的开发脱离后端的开发模式，拥有更大的自由度，以此便可做前端工程化、组件化、单页面应用等。 可以参考：前后端分离、web与static服务器分离 2. 尽量避免后端模板...

    rozbo 评论0 收藏0

  • 前端如何高效的与后端协作开发

    摘要：移动端应用一般都运行在微信浏览器中中手机浏览器中。因为微信浏览器是定制的浏览器，一般的远程调试方式都不可用，需要配合特定的工具，如微信开发者工具。 前端如何高效的与后端协作开发 1. 前后端分离 前端与后端的分离，能使前端的开发脱离后端的开发模式，拥有更大的自由度，以此便可做前端工程化、组件化、单页面应用等。 可以参考：前后端分离、web与static服务器分离 2. 尽量避免后端模板...

    learning 评论0 收藏0

发表评论

登陆后可评论

0条评论

高璐

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<