移动端弱网测试及Chrome前端调试

做自己的女王ヽ

需求概述

在应用上线前，测试的同事都会利用各种各样的测试案例来发现平时开发环境中不容易发现的 bug，其中很
大一部分 bug 都是由于复杂的网络环境导致资源加载不出来造成的。但是这些复杂网络环境是如何出现的呢？
曾经看过有测试同学拿着手机在电梯里面进进出出，用来模拟 Wi-Fi 断开连接和恢复连接，还有一些其他的
方式来进行测试。那么对于开发来说，我们总不可能抱着个电脑和手机到处跑，来复现这个不易模拟的场景
吧？这是就要提到一个非常重要的工具：Charles。

Charles之抓包

说到 Charles ，大家想到的应该是抓包吧。和 fidder 一样，在拦截并分析网络请求方面有奇效。监控请求是
每个移动端开发都需要掌握的一项技能。通过监控，可以看出每个页面发出了多少个请求，耗时多久，加载
了什么资源和资源的大小。更有甚者，还可以看到哪些 SDK 在偷偷发送统计数据等等。

先简单说明一下 Charles 是如何配合移动端来实现抓包的。
首先到 Charles官网下载 charles 的 PC 端，菜单栏的proxy 里面，macOSProxy 是本机代理，一般在调试手
机代理时，都会关掉本机代理，只监视手机端请求。

如上图，点击 macOS Proxy 就可以取消勾选了。
在同个菜单栏 Proxy 下，SSL Proxying Settings 里面配置端口，如果是双向认证的话，可以为特定域名添
加客户端证书 Client Certificates。

然后移步到菜单栏 Help 下面，安装 charles 的证书到手机端。

手机和电脑在同一网段内，将手机的代理写成电脑的 IP（charles 电脑端会弹框提示），授权下监视，然后
客户端的请求都可以正常地看到了。

Charles之限速

限速的前提是能代理抓包，在上面步骤中已经保证我们能够抓包了，现在来看下怎么限速。
限速主要在 Proxy 的 Throttle Settings 里面去设置一些网络参数。

Charles提供了许多中可供选择的网络条件，可以在 Throttle preset里面选取。
也可以自己手动配置参数，比如带宽包括上下行带宽、利用率（丢包率）等等。
这里写图片描述



现在混合开发比较流行，如何用手机连接浏览器调试呢。
首先，手机用usb连接到电脑，打开开发者模式授权，然后在chrome浏览器输入chrome://inspect，可以看
到 webview。

点击 inspect 就可以调试具体的 webView 了，前端开发对这个界面应该不陌生吧。