脱离使用场景谈工具都是在扯淡，今天咱们不扯淡，说点有用的，最近做的一个项目中，使用了 Charles 让调试变得简单很多，这是可以提升编码幸福感的工具，这里总结几个常用的 feature。

系统环境

电脑系统：MacOS 10.12.6
Charles 版本：4.1.4

应用场景

当下的移动应用开发广泛应用了 Hybrid 模式，将 H5 页面嵌入原生应用中，以手机 QQ 为例，70% 以上业务是由 H5 开发，由此可见一斑。
常规的开发流程是 FE 在本地开发环境中写好 H5 页面，开发完成后，后台 RD 将项目部署到测试版本中，手机下次测试版 APP，在 APP 内对页面进行测试。

FE 在开发环境中可以通过浏览器调试，部署到测试环境后，遇到新的 bug 或是需求的改动，需要在本地改动代码，重新部署到测试包，打开 APP 进行验证。这个过程太复杂，后台 RD 也会很烦。

这时候就需要 Charles 辅助开发。

关于 Charles

Charles 常用于截取网络封存包，可以设想一下，你的手机与服务器之间存在一个代理服务器，手机所有的请求都会经过这个代理服务器，如下示意图

设想你是一个负责收发信件的信使，当一位客户将书信交予你递送时，你可以按常规流程去递送，也可以在非常规状态下更改信件的内容、收信人等，你还可以决定这封信递送的速度，甚至直接将这封信拦截不送，知道收信人地址的你，可以反复递送信件考研收件人的耐心。收信人的回信，你可以将其修改，调包。长此以往，作为信使，你可能会被投诉，开除。但作为工具，你可以成为 Charles，受到大批开发者的拥趸。

监听设备

为了 Charles 能监听到你的移动设备的所有请求，你需要做一点配置

  • 你的移动设备与电脑处于同一局域网下，查看你电脑在此局域网下的 IP
  • 打开 Charles，Proxy > MacOS proxy，在 Proxy setting 下设置监听端口，默认 8888
  • 关闭移动端的所有代理工具，VPN、Shadowsocks 等
  • 在移动设备 WLAN 设置中，添加代理，IP 和 端口分别时电脑的 IP 以及 Charles 设置的端口
  • 退出 WLAN 设置，进入浏览器，访问网络，Charles 会显示设备连接请求，点击同意，可以看到在 session 窗口中迅速显示监听到的请求，配置结束。

常用 feature

前面都是介绍以及配置，下面介绍几个常用的 feature。

map

点选 session 窗口中的请求，右键查看选项，选项的最后两项即是 map 选项，提供了 map remote/map local 选项，可以将请求的资源映射到本地或者远程的资源，举个例子。
你需要调试页面中的 JS 代码，你可以将页面的 JS 请求映射到本地开发环境中的 JS 文件，刷新页面后，页面请求到的是本地 JS 文件，如此一来，修改本地 JS 后，刷新页面就可以在 APP 内查看到效果。
map 是这次开发中主要使用的功能，大幅度提高了我的开发效率。

参考：