测试关于使用Charles之路

报错解决方法在第三点 (持续更新,把踩过的坑都记下来)

目录

一 下载及安装

二 使用:

1、抓包

(1)通过 Charles 进行 PC 端抓包

(2)通过 Charles 进行移动端抓包

(3)通过 Charles 进行 HTTPS 抓包

2、简单说明下软件的工具使用

顶部工具

Proxy 菜单

Recording Settings(记录会话设置)

Throttle Settings(节流设置)

Breakpoint Settings(断点设置)

Reverse Proxies Settings(反向代理设置) 

Port Forwarding Settings(端口转发)

Proxy Settings(代理设置)

SSL Proxy Settings(SSL 代理设置)

Access Control Settings(访问控制设置)

External Proxy Settings(外部代理设置)

Web Interface Settings(Web 界面设置)

Tools 菜单

No Caching Settings(禁用缓存)

Block Cookies Settings(禁用 Cookie) 

Map Remote Settings(远程映射)

!!Map Local Settings(本地映射)【可以在接口右键选择,比较方便。关掉还是在Tools关~】

Rewrite Settings(重写)

DNS Spoofing Settings(DNS 欺骗)

Auto Save Settings(自动保存)

Client Process Settings(客户端进程)

Compose(编辑修改)

Repeat(重复)

Repeat Advanced(高级重复)

Validate(验证)

Publish Gist(发布要点)

Import/Export Settings(导入/导出)

Profiles(配置)

3、截取 Http 和 Https 网络封包+修改接口数据,前端查看页面展示

4、支持重发网络请求,方便后端调试。

5、支持修改网络请求参数。

6、支持网络请求的截获并动态修改。

7、支持模拟慢速网络。

三 报错

报错1:

SSL Proxying not enabled for this host: enable in Proxy Settings

报错2 未解决 (乱码)


一 下载及安装

这个比较简单,在官网下载安装就行,需要注意的是 信任机构选:第三方信任机构

另外Charles 是收费软件,使用时间不能超过30分钟,超过30分钟就重新打开软件

如果后面有注册码了的话 在Help 这里填加 输入注册码即可

二 使用:

1、抓包

(1)通过 Charles 进行 PC 端抓包

Charles 会自动配置浏览器和工具的代理设置,所以说打开工具直接就已经是抓包状态了。只需要保证一下几点即可:

  1. 确保 Charles 处于 Start Recording 状态。
  2. 勾选 Proxy | Windows Proxy 和 Proxy | Mozilla FireFox Proxy

(2)通过 Charles 进行移动端抓包

1、使手机和电脑在一个局域网内,不一定非要是一个 IP 段,只要是在同一个路由器下即可。

2、电脑端配置:

    • 关掉电脑端的防火墙(这点很重要)。
    • 打开 Charles 的代理功能:通过主菜单打开 Proxy | Proxy Settings 弹窗,填入代理端口(端口默认为 8888,不用修改),勾选 Enable transparent HTTP proxying
    • 如果不需要抓取电脑上的请求,可以取消勾选 Proxy | Windows Proxy 和 Proxy | Mozilla FireFox Proxy

3、手机端配置:(目前手机的包基本上都是https 建议做完这些步骤 直接去看抓https包需要怎么做)

    • 通过 Charles 的主菜单 Help | Local IP Address 或者通过命令行工具输入 ipconfig 查看本机的 IP 地址。
    • 设置代理:打开手机端的 WIFI 代理设置,输入电脑 IP 和 Charles 的代理端口。

4、设置好之后,我们打开手机上的任意需要网络请求的程序,就可以看到 Charles 弹出手机请求连接的确认菜单(只有首次弹出),点击 Allow 即可完成设置。

5、完成以上步骤,就可以进行抓包了。

(3)通过 Charles 进行 HTTPS 抓包

HTTPS 的抓包需要在 HTTP 抓包基础上再进行设置。需要完成一下步骤:

  1. 完成 HTTP 抓包配置。
  2. 电脑端安装 Charles 证书:通过 Charles 的主菜单 Help | SSL Proxying | Install Charles Root Certificate 安装证书。
  3. 设置 SSL 代理:通过主菜单打开 Proxy | SSL Proxy Settings 弹窗,勾选 Enable SSL proxying
  4. 移动端安装 Charles 证书:通过 Charles 的主菜单 Help | SSL Proxying | Install Charles Root Certificate on a Mobile Device or Remote Browser 安装证书。(浏览器访问"chls.pro/ssl" 一步一步安装就行图片是IOS的安装过程,安卓手机要用谷歌浏览器打开) 
  5. 设置好之后,我们打开手机上的任意需要网络请求的程序,就可以看到 Charles 弹出手机请求连接的确认菜单(只有首次弹出),点击 Allow 即可完成设置。
  6. 完成以上步骤,就可以进行 HTTPS 抓包了
  7. 设置SSL代理设置 可以解析HTTPS的包

2、简单说明下软件的工具使用

顶部工具

Proxy 菜单

Recording Settings(记录会话设置)

        Recording Settings 和 Start/Stop Recording 配合使用,在 Start Recording 的状态下,可以通过 Recording Settings 配置 Charles 的会话记录行为。Recording Settings 的视图如下图所示:

Include 和 Exclude 选项卡的操作相同,选择 Add,然后填入需要监控的Procotol、Host 和 Port等信息,这样就达到了过滤的目的。如下图所示:

还有一种方法就是在一个请求网址上右击选择 Focus,然后其他的请求就会被放到一个叫 Other Host 的分类里面,这样也达到了过滤的目的。(与Exclude 差不多)

Throttle Settings(节流设置)

Throttle Settings 和 Start/Stop Throttling 配合使用,在 Start Throttling 的状态下,可以通过 Throttle Settings 配置 Charles 的网速模拟配置。Throttle Settings 的视图如下图所示:

Breakpoint Settings(断点设置)

Breakpoint Settings 和 Enable/Disable Breakpoints 配合使用,在 Enable Breakpoints 的状态下,可以通过 Breakpoint Settings 配置 Charles 的断点模式。Breakpoint Settings 的视图如下图所示:

Reverse Proxies Settings(反向代理设置) 

(暂时还没用到,不太清楚)

反向代理在本地端口上创建 Web 服务器,该端口透明地将请求代理给远程 Web 服务器。反向代理上的所有请求和响应都可以记录在 Charles 中。

如果您的客户端应用程序不支持使用 HTTP 代理,或者您希望避免将其配置为使用代理,那么反向代理很有用。创建原始目标 Web 服务器的反向代理,然后将客户端应用程序连接到本地端口; 反向代理对客户端应用程序是透明的,使您可以查看 Charles 以前可能无法访问的流量。

Port Forwarding Settings(端口转发)

(暂时还没用到,不太清楚)

可以将任何 TCP/IP 或 UDP 端口配置为使用 Port Forwarding 工具从 Charles 转发到远程主机。这样可以调试 Charles 中的任何协议。

在 Macromedia Flash 中调试 XMLSocket 连接时,这尤其有用。

还可以使用 Charles 作为 SOCKS 代理,因此无需设置端口转发。

Windows Proxy(记录计算机上的所有请求)

如果想要抓取电脑端的请求,勾选 Windows Proxy 选项即可;如果只需要抓取手机请求,则取消勾选这个选项。

Proxy Settings(代理设置)

SSL Proxy Settings(SSL 代理设置)

这样就达到了针对某个域名启用 SSL 代理的目的。

Access Control Settings(访问控制设置)

Access Control Settings 表示访问控制设置。访问控制列表确定谁可以使用此 Charles 实例。通常,您在自己的计算机上运行 Charles,并且您只打算自己使用它,因此 localhost 始终包含在访问控制列表中。也可以选择 Add,然后填入允许访问的 IP,这样就达到了允许某个 IP 访问 Charles 的目的。

External Proxy Settings(外部代理设置)

External Proxy Settings 表示外部代理设置。可能在网络上有一个代理服务器,必须使用该代理服务器才能访问 Internet。在这种情况下,需要将 Charles 配置为在尝试访问 Internet 时使用现有代理。

可以配置单独的代理地址和端口:HTTP HTTPS SOCKS(如果有SCCKS代理,Charles将把它用于所有非HTTP(S)流量,例如端口转发。

Web Interface Settings(Web 界面设置)

Web Interface Settings 表示 Web 界面设置。Charles 有一个 Web 界面,可以让您从浏览器控制 Charles,或使用 Web 界面作为 Web 服务使用外部程序。

Web界面提供对以下功能的访问:

  • 节流控制
    • 激活或停用任何已配置的限制预设
  • 录音控制
    • 开始和停止会话录制
  • 工具
    • 激活和停用工具
  • 会话控制
    • 清除当前会话
    • 以任何支持的格式导出当前会话
    • 以 Charles 的本机会话格式下载当前会话
  • 退出查尔斯

通过检查 Web 界面 HTML ,您可以推导出如何将其用作 Web 服务来自动化 Charles。

Tools 菜单

No Caching Settings(禁用缓存)

No Caching 工具可防止客户端应用程序(如 Web 浏览器)缓存任何资源。因此,始终向远程网站发出请求,您始终可以看到最新版本。

工作原理:No Caching 工具通过操纵控制响应缓存的 HTTP 请求头来防止缓存。从请求中删除 If-Modified-Since 和 If-None-Match 请求头,添加 Pragma:no-cache 和 Cache-control:no-cache。从响应中删除 Expires,Last-Modified 和ETag 请求头,添加 Expires:0 和 Cache-Control:no-cache。

Block Cookies Settings(禁用 Cookie) 

Block Cookies 工具阻止了 Cookie 的发送和接收。它可用于测试网站,就像在浏览器中禁用了 Cookie 一样。 请注意,网络爬虫(例如 Google)通常不支持 Cookie,因此该工具还可用于模拟网络爬虫网站的视图。

适用范围

该工具可以作用于每个请求(选中 Enable Block Cookies 即可),也可以仅对你配置的请求启用(启用 Block Cookies 的同时,请选中 Only for selected locations)。当用于选定的请求时,可以使用简单但功能强大的模式匹配将工具的效果限制为指定的主机和路径。

工作原理:Block Cookies 工具通过操纵控制响应 Cookies 的 HTTP 请求头来禁用 Cookies。从请求中移除 Cookie 请求头,防止 Cookie 值从客户端应用程序(例如 Web 浏览器)发送到远程服务器。从响应中删除 Set-Cookie 请求头,防止请求设置客户端应用程序从远程服务器接收的 Cookie。

Map Remote Settings(远程映射)

Map Remote 工具根据配置的映射更改请求站点,以便从新站点透明地提供响应,就好像这是原始请求一样。

通过此映射,您可以从另一个站点提供全部或部分站点。例如:

  • 可以把 xk72.com/charles/ 映射到 localhost/charlesdev/ 来为 xk72.com 提供一个子目录;
  • 可以把 xk72.com/*.php 这种指定后缀的所有文件映射到 localhost/charlesdev/。

使用建议

如果您拥有站点的开发版本并且希望能够通过开发提供的某些请求浏览实时站点,则 Map Remote 非常有用。例如,您可能希望从开发服务器提供 css 和 images 目录。使用 live.com/css/ 等映射到 dev.com/css/ 或 live.com/*.css 到 dev.com 。

映射类型

  • 可以将目录映射到目录,如 xk72.com/charles/ 映射到 localhost/charlesdev/
  • 可以将文件映射到文件,如 xk72.com/charles/dow… 映射到 abc.com/testing/tes…
  • 可以将带有文件模式的目录映射到目录,如 xk72.com/charles/*.p… 到 localhost/charlesdev/
  • 如果在目标映射中未指定路径,则 URL 的路径部分将不会更改。如果要映射到根目录,请在目标路径字段中已 / 结尾。

HTTPS

Map Remote 工具可以将 HTTP 请求映射到 HTTPS 目标,反之亦然,因此您可以将 HTTP 或 HTTPS 站点映射到其对立面。

站点匹配

每个站点匹配可能包含协议、主机、端口和路径模式,以匹配特定的 URL。站点可能包括通配符。当您向此工具添加新站点时,可能会找到有关创建站点匹配的更多帮助。

!!Map Local Settings(本地映射)【可以在接口右键选择,比较方便。关掉还是在Tools关~】

Map Local 工具使您可以使用本地文件,就像它们是远程网站的一部分一样。您可以在本地开发文件,并像在线上一样测试它们。本地文件的内容将返回给客户端,就像它是正常的远程响应一样。

Map Local 可以大大加快开发和测试速度,否则您必须将文件上传到网站以测试结果。使用 Map Local,您可以在开发环境中安全地进行测试。

动态文件

动态文件(例如包含服务器端脚本的文件)不会由 Map Local 执行,因此如果文件中有任何脚本,脚本将按原样返回到浏览器,这可能不是预期的结果。如果您想使用动态文件,就好像它们是远程网站的一部分一样,请参阅 Map Remote 工具。

工作原理

当请求与 Map Local 映射匹配时,它会检查与路径匹配的本地文件。它不包括查询字符串(如果有)。如果在本地找到所请求的文件,则将其作为响应返回,就好像它是从远程站点加载的一样,因此它对客户端是透明的。如果在本地找不到所请求的文件,那么该请求会像平常一样由网站提供,返回由真正的服务器提供的数据。

站点匹配

每个站点匹配可能包含协议、主机、端口和路径模式,以匹配特定的 URL。站点可能包括通配符。当您向此工具添加新站点时,可能会找到有关创建站点匹配的更多帮助。

Rewrite Settings(重写)
DNS Spoofing Settings(DNS 欺骗)
Auto Save Settings(自动保存)
Client Process Settings(客户端进程)
Compose(编辑修改)

Compose 工具允许在原有的请求基础上修改。

Repeat(重复)
Repeat Advanced(高级重复)

Repeat Advanced 工具扩展了 Repeat 工具,提供了迭代次数和并发数的选项。这对于负载测试非常有用。

Validate(验证)
Publish Gist(发布要点)

Publish Gist 工具可以将将所选请求和响应作为要点发布。默认情况下,这个要点将匿名发布,这意味着你将无法做到 删除它。可以在 Tools 菜单的 Publish Gist Settings 中授权 Charles 使用您的 GitHub 帐户进行发布。

Import/Export Settings(导入/导出)

Import/Export 工具允许导入/导出 Charles 的 ProxyToolsPreferences 等设置。

Profiles(配置)

Profiles 包含所有配置设置的完整副本。

每次更改当前设置时,系统都会更新当前活动的配置文件,当您更改活动配置文件时,所有设置都将恢复为上次使用该配置文件时的状态。

请注意,如果导入已保存的配置,则会覆盖当前配置文件的设置。建议使用导入/导出来备份或创建当前配置和配置文件的快照,以维护多个并行工作区。

3、截取 Http 和 Https 网络封包+修改接口数据,前端查看页面展示

charles连接成功捕获请求https,接口都是乱码,解决https乱码:要先设置对应接口的SSL代理设置,Proxy—— SSL Proxying Settings...   ——Add —— Host:https:......  Port:443

目前可以看到https接口的数据了,接下来修改返回数据

(也可以直接获取全部的https接口 添加443 和* 就获取全部了)

3.1首先,如果返回数据是json格式,那么在桌面先建一个json文件,用打开代码的软件打开这个json文件。

3.2charles选择要修改响应数据的接口,右键,选中最下面的Map Local...—— choose选中建好的json文件——OK。

3.3桌面打开json文件,把接口响应数据复制过去,修改字段,然后客户端刷新页面就可以看到修改后的响应页面了~

3.4最后是关闭 点击Tools—— Map Local...——把刚刚的接口取消掉勾选,或者直接remove——点OK 关闭弹窗、

4、支持重发网络请求,方便后端调试。

就是修改请求接口测试后端接口正不正确,得设置断点

5、支持修改网络请求参数。

6、支持网络请求的截获并动态修改。

7、支持模拟慢速网络。

其实很简单  点击Proxy——Throttle Settings  (更详细可以看上面有写) ——选择一个低网速选项即可 56这个比2G网还低速

也可以设置配置2G的蜂窝网络

带宽256kbps(上传和下载)

利用100%

延迟300ms

MTU为1500字节

可靠性75%

不稳定的质量范围为20%-25%

如图:

8、用clarles抓socket的包

8.1ios版

8.1.1 手机WiFi先配置好Charles代理

WiFi代理输入IP和端口号

8.1.2手机打开开发者模式

方法一:

手机设置——隐私与安全性——在最下面找到开发者模式打开——最后在设置能看得开发者

如果在隐私与安全性没有找到开发者模式,那么得靠方法二

方法二:那就是找开发打个app测试包,这样子就有开发者了。是的 就是这样

8.1.3Charles设置 socket链接地址和端口

随便设置

8.1.4设置SSL

点击Proxy——SSL Proxying Settings

8.1.5就能抓到socket的包了 像对话一样

找到这个“圆圆黑黑以wss:”开头的

三 报错

报错1:

SSL Proxying not enabled for this host: enable in Proxy Settings

昨天用还好好的,今天使用就报(Notes        SSL Proxying not enabled for this host: enable in Proxy Settings)

原因是:我手机wifi代理IP搞错了,在电脑的cmd找ip地址跟charles了的地理ip不一样,手机代理输入正确的IP地址就可以了~

(热知识:在电脑查IP方法:1、使用win+R快捷键 2、调出“运行”窗口,输入“cmd” 3、进入命令窗口之后,输入:ipconfig/all 回车,就可以看到电脑的IP详细地址. 或者使用网络状态查看IP地址)

应该在charles查看ip和端口号:点击Help —— SSL Proxying —— Instal Charles Root Certificate on a Mobile Device or Remote Browser 可以看到IP地址和端口号,端口号一般是8888 (点击这个也可以重新下载手机端证书解决其他报错)

大部分报错是因为证书问题,我的不是 因为我昨天已经可以抓包了的。

报错2 未解决 (乱码)

请求的消息头是这样 Accept-Encoding: gzip, deflate, br 

  • 27
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值