Charles 使用手册

时间 2019-11-30

标签 charles 使用手册繁體版

原文原文链接

Charles能作什么

抓取 Http 和 Https 的请求和响应，抓包是最经常使用的了。
重发网络请求，方便后端调试，复杂和特殊状况下的一件重发仍是很是爽的（捕获的记录，直接repeat就能够了，若是想修改还能够修改）。
修改网络请求参数（客户端向服务器发送的时候，能够修改后再转发出去）。网络请求的截获和动态修改。
支持模拟慢速网络，主要是模仿手机上的2G/3G/4G的访问流程。
支持本地映射和远程映射，好比你能够把线上资源映射到本地某个文件夹下，这样能够方便的处理一些特殊状况下的bug和线上调试（网络的css，js等资源用的是本地代码，这些你能够本地随便修改，数据之类的都是线上的环境，方便在线调试）；
能够抓手机端访问的资源（若是是配置HOST的环境，手机能够借用host配置进入测试环境）

Charles设置成系统代理

启动 Charles 后，第一次 Charles 会询问你是否把Charles设置为系统的代理，若是此时你忽略了这个询问窗口，你能够在后期设置的；将 Charles 设置成系统代理：选择菜单中的 “Proxy” -> “Mac OS X Proxy/windows proxy” 来将 Charles 设置成系统代理。css

1.Charles基础配置

1.1Charles两种视图

视图结构html

viewers

Charles 主要提供两种查看封包的视图，分别名为 “Structure” 和 “Sequence”。前端

Structure/结构视图，将网络请求按访问的域名分类，好比某个域名下有n个资源请求，那么全部此域名下的请求都会在这里作一个详细的分类；
Sequence/序列视图，将网络请求按访问的时间排序，按照你的电脑的发送请求顺序进行。

1.2 内容过滤

直接过滤域名 sequence视图下使用filter
修改Include的域名和端口 在 Charles 的菜单栏选择 “Proxy”->”Recording Settings”，而后选择 Include 栏，选择添加一个项目，而后填入须要监控的协议，主机地址，端口号。这样就能够只截取目标网站的封包了;
过滤焦点域名

在目标的网络请求上右键，选中focus（此时，该域名已经被设置为一个焦点标记了；）；而后点击fillter后面的focused来筛选你的作的focus标记文件；设置的焦点域名在”focused Hosts”里面能够查看和管理。

在structure模式下看更直观

1.3 Charles截取 Chrome 和 Firefox 浏览器的网络请求内容

须要注意的是，Chrome 和 Firefox 浏览器并不必定使用的就是本机，多是一些代理工具，而 Charles 是经过将本身设置成代理服务器来完成资源记录的，因此若是你的charles没法截取 Chrome 和 Firefox 浏览器的网络请求内容，须要在浏览器里作下修改。在 Chrome 中设置成使用系统的代理服务器设置便可，或者直接将代理服务器设置成 127.0.0.1:8888 也可达到相同效果。webpack
chrome://settings/?search=%E4%BB%A3%E7%90%86ios

备注：若是您的chrome有用过改hosts文件工具，请暂时关闭；不然chrome会经过你的扩展控制，不能使用charles；你的chrome中可能会看到 您的网络代理设置是由扩展程序管理的。

1.3.1 chrome 使用 SwitchyOmega 链接代理

SwitchyOmega链接pac；或者直接链接charles代理；这样绕过系统代理配置；对于代理配置冲突的状况下可使用SwitchyOmega，切换很是方便。git

1.4 hosts文件工具

charles可使用系统hosts或三方hosts工具设置的系统hosts配置，也可使用自带的map remote功能实现映射功能。github

switchhosts 推荐
Gas mask 2 够用
Helm 通常

1.5 https协议抓包

打开Charles, 点击Help->SSL Proxying->Install Charles Root Certificate
proxy - proxy settings - proxies - enable socks Proxy
proxy - proxy settings - Mac OS X - Enable MacOS X - use socks proxy （这个彷佛无关紧要）
ssl proxy settings - ssl proxying - add 要代理的https www.baidu.com 443

每步最好重启一下 charles 来保证配置生效。

证书安装

help - SSL Proxying install charles proxying certificate

移动端使用charles代理

chls.pro/ssl 安装证书 , ios必须使用safari ，第一步在“描述文件与设备管理”中安装，而后在通用 - 关于本机 web
证书信任设置启用证书（fiddler的证书安装和charles基本类似）chrome

1.6 断点

能够中断挂起请求，对目标网址进行监控

2. charles进阶配置

1.Map功能

map local情景：一个项目上线后，发现js或者css bug了，怎样调试？线上项目的静态文件没法直接编辑，有何方法在不改变其余参数的状况下直接用本地的开发文件替换线上的文件从而方便调试？windows

tools->>map local

Save Response… map local能够结合这个功能来mock，稍加修改就能够模式想要的测试数据。

map remote情景：进行一个需求开发，测试环境是：lvxing.st.meituan.com，测试完成，前端开发者上线了，如今QA须要跟踪线上状况，如何切到线上环境？

tools->>map remote

Bypass proxy settings for these Hosts & Domains 绕过charles的配置，这样charles上的这个配置就失效了，可是不影响hosts工具的配置。

出现冲突时，默认hosts的优先级高

2.rewrite功能

rewrite功能重写对应的内容，主要能够对某些匹配请求的header、host、url、path、query param、response status、body进行rewrite。

rewrite能够作不少手脚。

use a dynamic port

blog.csdn.net/laxian2009/…

3. charles高级

1.黑白名单

charles黑名单和白名单工；black list：阻止对匹配HOST的请求；能够直接把请求丢掉，也能够直接返回403状态码；

修改服务器返回内容 www.jianshu.com/p/f7ceb7992…

4.常见问题

1. charles提示“SSL Proxying not enabled for this host: enable in Proxy Settings, SSL locations”

出现这种状况，charles解析不出path，咱们就无法创建映射。具体的解决方案为在proxy中的SSL Proxying setting中钩上Enable SSL Proxying，而且将要解析的host加上

2. Proxy-->Proxy Settings中在options中加入hosts： bypass charles for these Hosts &Domains

3. 没法访问localhost or 127.0.0.1

没法访问localhost or 127.0.0.1:将访问地址的 localhost 改成 localhost.charlesproxy.com

4. 常见问题 www.cnblogs.com/1-434/p/787…

5. https无效证书问题以及忽略证书错误

safari浏览器能够经过信任证书来解决，可是在app中缺乏“继续访问不可信站点的设置”。

fiddler 是这样解决的 ignore server certificate errors

6.charles界面看不到请求内容？

若是有多个设备链接，都尝试一下请求，排除因设备配置缘由形成的问题
若是其余设备正常，例如手机端请求能够走代理, pc端不能走代理可能有几个缘由：
- 使用了pac代理或其余代理
- 本地hosts工具配置映射和charles冲突，hosts优先级更高

7.浏览器世界的正确referer

referer的正确英语拼法是referrer因为早期http规范的拼写错误，为了保持向后兼容就将错就错了，但也有新的网络技术纠正此问题，因此拼法不一

8.PAC自动代理文件格式，如何写PAC文件

www.cnblogs.com/kzd666/p/41…

最基本的写法就是一个function函数

function FindProxyForURL(url, host) {
    var lastPos;
    var host_tmp = host;
    var prefix = '*.';
    do {
        if (autoproxy_host.hasOwnProperty(host_tmp)) {
    		return 'PROXY proxy.oasec.mycomp-int.com:8080';
        }
        
        lastPos = host.indexOf('.') + 1;
        host = host.slice(lastPos);
        host_tmp = prefix.concat(host);
    } while (lastPos >= 1);
    return 'DIRECT';
}
复制代码

9.charles代理处理问题时要检查map remote

10.map remote要注意相对路径下的静态资源

本想用工具快速处理一下代理，作个静态页面映射方案，但静态资源依赖逻辑工具是不能提供的，即便用工具的一些规则实现了静态资源定位成本也是至关高。因此仍是要写一个服务像webpack-dev-server。

官网

www.charlesproxy.com/

Fiddler使用手册

过滤器

blog.csdn.net/yu101474586…