利用Charles进行前端在线调试实战

一、 安装Charles

去 Charles 的官方网站（http://www.charlesproxy.com）下载最新版的 Charles 安装包，是一个 dmg 后缀的文件。打开后将 Charles 拖到 Application 目录下即完成安装。

二、将 Charles 设置成系统代理

Charles 是通过将自己设置成代理服务器来完成封包截取的，所以使用 Charles 的第一步是将其设置成系统的代理服务器。

启动 Charles 后，第一次 Charles 会请求你给它设置系统代理的权限。你可以输入登录密码授予 Charles 该权限。你也可以忽略该请求，然后在需要将 Charles 设置成系统代理时，选择菜单中的 “Proxy” -> “Mac OS X Proxy” 来将 Charles 设置成系统代理

三、 截取 Https 通讯信息

安装证书：
如果你需要截取分析 Https 协议相关的内容。那么需要安装 Charles 的 CA 证书。具体步骤如下。
首先我们需要在 Mac 电脑上安装证书。点击 Charles 的顶部菜单，选择 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate”，如图：

v2-b245c5cef3515a833d9c2feb21b15d1b_1440w.jpg

四、设置Map Remote

charles-set.png

注意一些细节:

• 默认端口为80一般不需要填
• 设置完以后看Charles界面的提示，如果提示“Notes SSL Proxying not enabled for this host. Enable in the Proxy Menu, SSL Proxying Settings”， 按照提示将对应的远程域名添加到SSL Proxying Settings中即可。

关于Charles的设置还可以参考： https://zhuanlan.zhihu.com/p/36160972

五、浏览器设置

注意需要将Chrome设置为使用系统代理，否则Charles无法截取Chrome的网络请求

五、本地服务

线上服务一般多是https模式，本地前端服务也需要改成https的方式，在webpack devServer中设置https: true即可开启https服务，然后浏览器中访问的时候在Chrome的开发工具中设置对默认证书信任即可。