iOS开发 Charles 代理教程

2,333 阅读17分钟

在本教程中,您将在*StarCharles 应用程序中处理从**Star Wars API (SWAPI)*到您自己的自定义 API 的响应。在此过程中,您:

  • 设置。
  • 使用映射工具断点
  • 使用右键重复工具执行操作。
  • 将网络活动保存到磁盘。
  • 与他人共享报告。

注意:本教程假设您使用 Charles Proxy。还是学徒?首先查看适用于 iOS 的 Charles Proxy 教程

入门

starter文件夹中打开StarCharles.xcodeproj 

StarCharles 工作室提供了由 SW 的《星球大战》的电影和角色。制作并运行 API以查看它是的。

image.png

在幕后,您每次点击电影或角色时,该应用程序都会发出请求以获取下一个显示的信息。

查看Xcode中的以下组:

  • Network:它定义了所有的网络服务。
  • 模型:包括所有数据模型。
  • ViewModel:包含ViewModel.swift,它是调用所有项目的核心,映射到本地模型并更新。
  • 视图:包括所有与视图相关的代码。

现在,您将安装和配置 Charles Proxy 以观察 StarCharles 和 SWAPI 之间的通信。

设置

您的第一步是让 Web 调试设置正常工作。为此,您将:

  • 下载并安装。
  • 让 Charles 自动配置您的网络设置。
  • 下载证书并将其安装到您观察加密网络通信的每个设备或设备上。

首先,下载最新版本的Charles Proxy,在写这篇文章时为v **4.G的请求文件,接受 Charles 的图标拖到您的应用程序文件夹中进行许可安装。

Charles Proxy 不是免费的,但它确实提供了 30 天的免费试用。由于 Charles 在试用模式下运行了 30 分钟,因此您可能需要在本教程中重新启动它。

配置网络设置

查看网络启动提示*。如果没有,请按-P命令*允许自动配置的设置。

image.png

如果出现,请您点击启动权限输入的密码。

image.png

安装 SSL 证书

Charles自己的根证书,让您的 Web 根证书和中间件。它使用(也称为将证书动态发给 API 机构 (CA) 创建和签署它发送的本地浏览器的证书)以纯文本格式查看您的浏览器。 。

为此,您必须在查看网络请求和请求的设备或安装证书并为查尔斯根。

转到运行 StarCharles 的连接。然后打开Safari,输入*.pro/ssl*。

image.png

如果您没有看到警报,您可能需要重新加载 Charles。如果您愿意,然后允许在此点击下载启动上的 Safari 中的 Safari 中包含重新加载。

image.png

导航General ▸ Profile并点击*Charles *Proxy CA。

image.png

点击安装下面的如下所示的蓝色安装**按钮,然后在屏幕上显示您再次打开。

image.png 最后,您需要信任此证书。在设置上完全的设置,转到通常关于**▸中的信任

image.png

Enable Full Trust for Root Certificates下,打开Charles Proxy CA并在阅读根证书警报后点击Continue 。

image.png

并运行。点击电影,然后点击特定电影。下载应用,点击一个字符*。浏览程序以进行网络调用。查看您在StarCharles*中点击的每一行在Charles 中显示。CONNECT``swapi.dev

image.png

恭喜,这意味着你成功地建立了一步。一步高升!

image.png

注意:如果您在设置 Charles 时遇到任何问题,请查看适用于 iOS 的 Charles 代理Charles 常见问题解答页面以获取更多帮助。

重于主机

在这种情况下,Charles 会关注您 Mac 上的所有网络呼叫。现在,您只对一个特定的主机有此要求:https://swapi.dev/.通过只关注域,您可以避免 Charles 的每个网络默认而分心。

请按照以下步骤专注于地域:

  • 点击选项卡以时间顺序显示网络呼叫按顺序。

image.png

  • 任何点击swapi.dev请求,然后点击成为菜单上的焦点*。*
  • 过滤为对的限制,仅以将显示的限制为重点的调用swapi.dev

image.png

这样,您就可以将一个域添加到焦点列表中。您可以随时选择“焦点*”*过滤器和任何其他需要关注的域。

注意:通过Shift-Command-O,您可以查看指定主机列表、添加或删除域以及导入和按导出此列表。

启用 SSL 代理

看看其中一个swapi.dev请求。选择任何请求,然后点击其他内容的“*内容”卡。*哇,那是什么?

image.png

注意:您看到的请求响应是**内容,请点击其中的任何一个。这意味着您在 Charles Preferences 中的查看者卡中未提出**请求和响应。

如果请求内容乱码,则需要启用SSL 代理。这会告诉 Charles 使用您安装之前的证书与您进行启用 SSL 代理的域通信。执行此操作:

  1. 开始点击请求选择,然后从下拉菜单中启用任何SSL 代理。swapi.dev

image.png 2. 退出并重新启动查尔斯。 3. 打开代理▸ SSL代理设置。确认它swapi.dev显示为SSL代理选项卡中包含的位置。 4. 点击网络主窗口中的窗口,以清除现有的流量。 5. 现在,选择swapi.dev请求并选择Contents任何选项卡。

image.png

探索所有内容预告卡,探索《星球大战》。

操作数据

Charles 提供了各种工具来处理请求和响应数据,包括:

  • 地图本地
  • 地图智能
  • 改写
  • 镜子
  • 自动保存
  • 重复
  • 高级重复

注意:您可以在Charles 文档中查看所有工具。

请求将映射到本地和远程响应

在查尔斯,允许您在中映射更改请求,以便从新透明地提供其响应,就像它是原来的响应一样。实际上,数据实际上是从其他地方到达的,比如另一个文件,甚至是本地位置。

这意味着您可以模拟您的请求并随心所欲地确定数据,然后查看您的应用程序Int处理更改。办?您可以轻松地测试这些问题。String``nil

地图本地工具映射请求以从本地计算机而不是通常的终点在访问。接下来,StarCharles 中进行测试。

在下载的项目材料中,找到一个包含movies.json资源文件夹。https://swapi.dev/api/films/

  • 在程序上的StarCharles应用程序中,点击Films

image.png

  • Charles 中,单击 https://swapi.dev/api/films/并选择Map Local
  • 点击选择。从下载的资料中选择films.json的精选确定

image.png

  • 打开点击。从当前返回。电影

image.png

您可能会要求获得一个自定义的本地响应。您拥有相同的数据模型,但具有不同的价值。

请注意,您希望可以从电影中获取任何数据*。json*以包含您的数据值,但要准确开始应用程序,请注意。

地图远程工具

正如 SWAPI 的副本已经那样,没有人维护原始的swapi.co。然而,幸运的是,SWAPI 的副本存在于银河系的其他地方。在本节中,您将使用地图远程工具在 StarCharles 的粉丝的副本swapi.dev和不同的副本之间进行映射swapi.tech

使用以下步骤映射https://swapi.dev/api/people/请求以获取其响应https://www.swapi.tech/api/people/

  • 点击StarCharles 中的字符生成https://swapi.dev/api/people/

image.png

  • 直接点击Charles中的请求并选择远程地图。保留地图从部分,然后像下面这样地图到部分:

  • 选择https作为协议

  • www.swapi.tech作为*Host**重新*填写。

  • 端口中输入443

  • 输入*/api/people/作为路径*。

  • 点击以确定保存映射。

image.png

  • 点击应用,点击点击返回的明星程序,Charles 们,然后我们会怎么知道卢克长什么样

image.png

正如您在 Charles 中看到的那样,请求现在转到了新主机。因为新主机使用不同的数据模型,所以现在只包含字符名称。

image.png

查看所有照片

要查看以下请求列表,请执行步骤:

  • 打开工具菜单。

image.png

  • 单击映射本地以查看映射到您计算机上的位置的请求。

image.png

  • 或者,印度远程以查看到不同主机的请求。

image.png

您可以选择使用其他位置进行映射进行编辑,重新绘制、重新导入列表、从其他位置导入或映射到当前地图。

注意:如果映射设置会显示StarChar的数据。在后面的部分中或如果没有任何远程显示,请检查是否需要影响或禁止本地显示。

使用断点

解决问题*,*并可以在您的情况下,利用断点的任何理由。

https://swapi.dev/api/people/1在本节中,您将通过添加点和相应的响应来中断此操作。开始,通过转到工具远程地图并取消启用地图远程来您在上一节中设置的远程远程连接保留本地映射;你会在这里使用它。

按照以下步骤在https://swapi.dev/api/people/1请求和相应的响应上添加断点。

  • 在 StarCharles开放电影**中
  • 点击本地新希望
  • 点击点击https://swapi.dev/api/people/1Charles的请求并选择Breakpoints
  • 返回一个新的希望并再次打开本地
  • 现在,您可以在请求之前使用任何输入更改请求。
  • 单击执行。第一次是发送请求。
  • 单击执行。第二次请求响应。

22.gif

您还可以在特定的 API 上设置一个断点时发出请求。然后,您还可以在指定请求的实际请求时调用,并且您可以在向实际请求发送操作。之前更改为来自中的确切响应 - StarCharles。

注意:如果您错过了响应,您的请求很可能由于各种原因而失败。尝试地进行更改。

要停止使用断点请求,请转到代理禁用断点

image.png

要查看列表断点的所有请求列表,请打开代理断点设置

image.png

允许使用和阻止列表过滤请求

在本教程的前面部分,您学习了如何关注特定主机。现在,您将学习如何创建允许阻止请求的列表。如果您想模拟服务器错误或连接丢失的情况,这会派上用场。

请按照以下步骤添加https://swapi.dev/api/people/2到阻止列表:

  • StarCharles开放电影
  • 点击本地新希望
  • 右键单击 https://swapi.dev/api/people/2Charles 并选择Block List
  • 返回模拟器并再次打开LOCAL A New Hope

image.png

通过这样做,您将该请求置于阻止列表中。Charles 将一直失败,您将在 Xcode 控制台中看到以下错误:

获取字符已完成:失败(StarCharles.NetworkError.jsonDecodingError (错误:Foundation.URLError ( _nsError : Error Domain=NSURLErrorDomain Code=- 1  "(null)" )))

您可以通过在 Charles 中再次右键单击此请求来禁用阻止,然后在下拉菜单中取消选中阻止列表。

注意:通过将任何请求添加到允许列表,您将创建一个白名单。Charles 现在将阻止除允许列表中的请求之外的所有请求。

您可以通过选择工具允许列表工具阻止列表来查看添加到允许或阻止列表的所有请求的列表。您也可以在此处修改该列表。

image.png

自动化操作

既然您知道如何使用断点操作请求和响应,您可能想知道是否有一种方法可以做到这一点,而不必每次都打开断点编辑窗格并竞相手动更改响应。

有!在本节中,您将学习如何为重复操作编写规则。

这不仅可以节省时间,还可以帮助对您的应用程序没有相同访问权限的测试人员。例如,假设测试人员想要使用特定令牌尝试您的应用程序。在这种情况下,他们不需要为所有请求添加断点。相反,他们可以使用重写工具使用规则修改所有请求的令牌。

使用重写工具,您可以创建规则来修改通过 Charles 的请求和响应。

image.png

在菜单中,推动工具命令查尔斯启用重新编写,然后单击添加以查看工具的所有三个部分*:*设置位置

image.png

  1. 套装:如左图所示,每个套装可以有不同的位置和不同的规则
  2. 位置:显示在主机上,每个位置都包含目标的规范。
  3. 在右下角每个规则都包含实际的属性操作请求,您可以在其中操作响应的以下内容 
    • 标题
    • 主持人
    • 小路
    • 网址
    • 查询参数
    • 响应状态
    • 身体

,您将试用一下。

在行动中回应

还记得您什么时候映射https://swapi.dev/api/people/以获取请求https://www.swapi.tech/api/people/吗?

突然发现,您是一名希望使用中间人服务器接收所有请求并使用客户端的原始结构与不同价值的数据,然后进行响应。您服务器映射新的服务器;已经现在,是时候用替换来所有请求了。

在本节中,您将不是people获取该请求,以便它从swapi.tech,而是获取planets

  • 删除占位符*集(*如果有)。
  • 在 Charles 中,打开工具重写
  • 箭头启用
  • 单击以添加一个新并将其命名为人物

image.png

  • Location下,单击Add并将 swapi.dev/api/people/ 粘贴到主机文本字段中以自动填充其他文件。确保在people之后包含最后的斜线。点击确定

image.png

  • 在规则部分,一个具有路径类型的新规则。**在匹配下的字段中输入,在替换下的值字段中输入**行星

image.png

  • 点击OK保存新规则,然后继续流行OK保存并关闭重写设置
  • 在用户中,点击字符

image.png

如您所见,结果与以前不同。当然,人们可能会争辩说,行星本身也是角色。

重复请求

当您测试后端代码时,您可能希望在不涉及客户端的情况下检查服务器的响应。重复工具使这很容易。通过右键单击任何请求,然后选择重复来启用它。

在这种情况下,Charles 将完全相同的请求重新发送到服务器,并将响应显示为新请求,而无需对客户端执行任何操作。默认情况下这只发生一次。

当难以导航到客户端界面中发送请求的位置时,请记住重复工具。一旦您有一个示例请求,请使用重复再次发送它。

注意:您可以使用Repeat Advanced来获得更多选项,例如迭代次数和并发性,以挂钩可能来自后端的错误。

记录网络活动

通过记录网络活动并将其保存到磁盘,您可以比较一段时间内的结果。这使您可以查看您的后端团队是否对您的服务器进行了任何更改。

image.png

如果您想作为测试人员或什至作为在特定请求中发现安全问题的黑客传递任何结果,这也可以让您制作一些报告。

本地镜像网络数据

使用Mirror,您可以将会话的响应保存到磁盘。这很方便:

  • 将数据从一台服务器迁移到另一台服务器。
  • 制作所有回复的副本。
  • 克隆服务器以在本地使用。

Charles 将响应放置在 API 本身使用的相同目录结构中。这意味着您将拥有与 URL 相同文件名的每个响应的相同路径。请注意,文件名包括查询字符串。

image.png

注意:如果您收到两个针对同一个 URL 的响应,Charles 将覆盖新的响应,因此您将始终将最新的响应保存在镜像中,除非您关闭该工具。

要启用镜像,请执行以下操作:

  • 在 Charles 中,打开Tools ▸ Mirror
  • 选中启用镜像
  • 选定位置
  • 选择一个保存地。
  • 通过在主机领域中输入swapi.dev/api/**添加新的,…

image.png

现在您已将Charles的所有反应都反映swapi.dev到您的笔记本电脑上,并返回四处中的StarCharles导航以生成一些。

在 Finder 中,打开保存目的地。

image.png

现在,您可以看到保存的会话响应。

自动保存会话

Charles 可能会或监控他们与朋友的朋友们使用其他朋友的朋友来使用。不同的请求。

一看,您有测试人员,他使用 Charles 设置在多个设备上并行运行结果测试。在这种情况下,测试人员应该看到并在出现错误时轻松报告。通过使用能够保存测试工具,测试自动化的管道非常简单。

使用此工具,Charles 会自动保存和清除任何一段录音会话。

要启用此功能,请按照以下步骤操作:

  • 在 Charles 中,打开工具自动保存
  • 启用自动保存
  • 分钟输入一次。
  • 选择一个来保存数据。
  • 本,将保存为查尔斯会话文件。不过,请选择堆栈,查看所有其他的使用示例保存类型。

image.png

Charles 以格式保存名称中按钮的会话文件yyyyMMddHHmm,因此它们在您选择的时间出现。

在 StarCharles 中导航。等待,您会在目标中**看到一个已保存的会话。

image.png

您可以使用这些文件报告并与任何人共享。他们可以在打开文件并查看与您在此处生成的 Charles 的所有制作中的会话。

注意:自动保存和镜像保存会话中的不同信息。自动保存会保留所有内容、所有请求和响应。Mirror 仅保留您从服务器接收到的输出数据作为响应。

在团队中使用 Charles

Charles 提供了几个功能来帮助测试人员和开发人员一起工作。您已经了解了使用Auto Save共享会话,但是还有其他方法可以将 Charles 数据发送给其他人。您还可以发送您的 Charles 设置或导入其他人的设置,以便测试团队的所有成员都可以使用相同的设置。

分享会

在 Charles 中,当您右键单击其中一个请求时,您会看到以下选项:

  • 复制 URL:复制实际 URL。
  • 复制 cURL 请求:复制包含请求的所有数据(包括标头)的 cURL 请求。
  • 复制响应:复制响应内容。
  • 保存响应:保存响应内容。
  • 导出会话:以您选择的格式导出整个会话。

image.png

注意:为了最好地帮助后端开发人员准确了解发生了什么,请发送整个会话或cURL请求以及相应的响应。

共享设置

您可能已经注意到,Charles 提供了几乎所有内容的导入和导出选项,尤其是工具的配置。尝试以下任一方法来共享 Charles 的工具配置:

  1. 当您从菜单中打开任何工具时,您最终会进入一个包含两个选项的窗口,即导入导出。使您可以在特定工具中执行。

image.png

  1. 您还可以打开工具导入/导出设置。必须要导入或导出设置。

image.png

注意:在下载的项目材料中,可以在资源文件夹中找到**Charles Settings.xml,您可以将其导入您的Charles中。它包括您在本教程中使用的所有配置。

恭喜!您现在已经完成了本教程,您对 Charles Proxy 的一些更高级的功能更深入的了解。

结论

在本教程中,您学习了如何:

  • 使用 Charles 代理来观察网络并沿用路径数据。
  • 使用映射和断点来操作数据。
  • 添加的规则集来各种请求和响应。
  • 将所有网络活动保存到磁盘。
  • 与他人共享报告。

如果您想更深入地探索,请从这里查看Charles 文档。有关 iOS 网络的更多信息,请查看Networking with URLSession视频课程。

下载项目资料与原文地址

这里也推荐一些面试相关的内容!