抓包工具在排查bug中的应用

- Fildder （常用于PC端）

- Charles  （常用于移动端）

bug排查与修复场景

线上发现一个bug，但测试环境没有这条数据，无法验证。通常做法：  

1. 接口返回的数据在代码中写死

2. 数据在mock平台上写死，本地在proxyTable中匹配

问题：写死的代码容易忘记还原，直接发布到线上

方案

在不修改代码的原则上验证bug是否修复成功。举个例子：罗马数字在线上打印时显示不正常，但是测试环境没有罗马数字。那么可以使用 Fiddler 拦截请求，自动返回数据。步骤：

1. 桌面新建一个response.txt，将线上对应接口返回的数据复制到 response.txt 并保存  

2. 选中 AutoResponder，选中 Enable rules 和 Unmatched requests passthrough

3. Add Rule，匹配规则是接口名称，返回值选中 response.txt

4. 访问本地环境，获取线上数据

总结：拦截本地接口请求，返回线上数据  

问题：罗马数字有很多，并且有各种组合，甚至还是其他字符的显示问题，我们不可能把现在所有数据都匹配一遍。  

思考：有没有可能在不重新部署的情况下，在线上验证修复的bug呢？并且看到的js代码是没有压缩的呢？

方案

1. 本地执行npm run build，将打包好的medical.insurance.client.xxx.min.js放到桌面

2. 在Fiddler中Add Rule，匹配线上https://mi.guahao.cn/medical.insurance.client.20190426.min.js，返回本地medical.insurance.client.xxx.min.js

3. 访问线上环境，验证修改后的代码

总结：拦截线上js请求，返回本地改完bug后的代码。如此一来，线上所有的数据都能经过修改后的代码来验证一遍。

弱网环境场景

弱网环境下出现的bug，修改完之后怎么验证？

Rules > Performance > Simulate Modem Speeds  

自定义网速

Rules > Custonize Rules，搜索关键字 m_SimulateModem。两个设置分别是上传和下载 1KB 所消耗的时间