前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用

简介: 【2月更文挑战第21天】前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用

一、前言

image.png

说起前端分析工具,我翻来翻去。把 Chrome/Safari/Firefox/IE....的性能工具翻了一个遍,真是觉得工具五花八门,但是.....

原理没变。

想着也该写个公众号文章了,以让别人知道我在干什么。可是写什么主题呢?

http1.1/2.0 协议下的性能分析? 看话题就觉得没啥观众。

浏览器不同内核对前端处理的逻辑?会有人问:啥是内核?感觉很受伤。

............

并且从历史上的文章来看,一步步基础操作的文章比较受欢迎。所以有了写这篇文章的想法。

我在整理前端工具的时候,发现 charles 工具还不错,虽说是收费的工具,但是支持的平台挺多。

但是在网上看到挺多文章说 charles 录制 https 的时候,都没有把录制 android/IOS 上的 https 应用写的非常清楚。在这里一步步写出来给大家参考下。

正文从这里开始。

二、环境

  • macOS Sierra Version 10.12.6

  • Charles 4.2.5

  • iphone Version 9.1(不同版本有稍微的区别,只要能找到相应配置即可)

  • 华为EMUI Version 5.0.3 / Android Version 7.0

三、代理配置

1.首先打开Charles,主界面如下。

image.png

2.查看下代理配置。点 Proxy Setting...。同时把录制按钮点亮(其实默认就是亮的)

image.png

这个端口要记住,默认是 8888。
image.png

3.安装Charles自己的根证书。点击 Help> SSL Proxying > Install Charles Root Certificate

image.png

4.查看下 keychain 中的 Charles 证书是否始终信任。

image.png

5.保存Charles的根证书。点击 Help > SSL Proxying > Save Charles Root Certificate。(保存到哪里不用我说了吧?要一定要说的话,那就是随你的便!)

image.png

6.查看下本地 IP。点击 Help > Local IP Address
image.png

以上都是电脑上的准备工作,下面开始配置手机。因为 IOS 和 Android 的配置有不同,所以这里,分成两部分写。

四、IOS 配置

1.点开 wifi 的信息界面,并点击“手动”配置代理服务器。这里的 IP 就是前面看到的 IP,端口是前面配置的端口。
image.png

2.在手机上配置了上一步之后,在电脑上会出现如下提示。这肯定是点 Allow 了。
image.png

3.在手机上输入一个https的网址时会出现如下提示。点击信任。 这一步还有另一个方法,就是点击设置->通用->关于本机->证书信任设置-> 找到 charles proxy custom root certificate,然后开启信任。
image.png

4.在手机上打开 https 的页面。在电脑上查看录制效果。上边是电脑上 Charles 的录制结果;下边是手机上的打开的页面。
image.png
image.png

五、Android 配置

1.在手机上配置代理。怎么找到如下这个页面的呢?要在 wifi 的连接上按住不动,出现个菜单,然后点击 Modify network,并且在新窗口中点击 Show advanced options。
image.png

2.在手机上配置了上一步之后,在电脑上会出现如下提示。这肯定是点 Allow 了。
image.png

3.在手机上安装证书。
3.1.把保存的根证书文件传到手机上。(我是用微信的文件传输助手传的,你想用什么就随便了,前提是你能找得到文件保存在哪里了。)
3.2.点击 Install from SD card,找到证书文件(下面右图最上面的一个文件)。
image.png
image.png

3.3.输入屏保密码和证书名。我知道这里会有人问,为啥这一步要用拍的图,而不是截的图呢?哈哈。这就是因为呀,手机上不允许在这一步直接用截图功能!

image.png
image.png

4.在手机上打开 https 的页面。在电脑上查看录制效果。 上边是电脑上 Charles 的录制结果;下边是手机上的打开的页面。
image.png
image.png

正文至此完。

六、小结

在这个没有讲虚幻的原理和逻辑的文章中,一步步的操作是不是让你有很脚踏实地的感觉?其实我强忍着没有写 charles 的抓包原理和逻辑(其实就一个 proxy,有啥好讲的呢)。

这样的抓包过程,并不是原理有多复杂,而是逻辑有点绕(不是操作上感觉逻辑绕,而是解释逻辑起来有点绕),点开了也不难懂,就是网络中的数据包是怎么走的。只要明白这一点,管它是什么手机,管他是什么系统在运行类似这样的抓包工具,都是可以配置得出来的。

目录
相关文章
|
2月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
87 3
|
10天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
14天前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
3月前
|
数据采集 数据挖掘 UED
电商平台手机销售数据采集与分析
随着科技的进步,尤其是手机的普及,国民生活变得更加便捷。现今,手机销售已从传统的实体店模式转向电商平台,这一转变加剧了市场竞争,给手机厂商带来了新的挑战。为了应对挑战,电商平台越来越重视手机销售情况与用户体验,利用数据分析成为了解市场趋势的关键手段。本章节聚焦于某电商平台的手机销售及售后数据收集,通过深入分析商品销售状况与用户反馈,旨在探索有效的营销策略,助力电商平台与手机行业的共同进步。
122 1
|
2月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
79 8
|
2月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
53 3
|
2月前
|
Web App开发 定位技术 iOS开发
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
Playwright 是一个强大的工具,用于在各种浏览器上测试应用,并模拟真实设备如手机和平板。通过配置 `playwright.devices`,可以轻松模拟不同设备的用户代理、屏幕尺寸、视口等特性。此外,Playwright 还支持模拟地理位置、区域设置、时区、权限(如通知)和配色方案,使测试更加全面和真实。例如,可以在配置文件中设置全局的区域设置和时区,然后在特定测试中进行覆盖。同时,还可以动态更改地理位置和媒体类型,以适应不同的测试需求。
180 1
|
3月前
|
SQL 存储 数据可视化
手机短信SQL分析技巧与方法
在手机短信应用中,SQL分析扮演着至关重要的角色
|
5月前
|
编解码 Android开发
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。
96 1
|
6月前
|
Java Android开发 iOS开发
探索安卓与iOS开发的差异性:平台、工具和用户体验的对比分析
【7月更文挑战第30天】在移动应用开发的广阔天地中,安卓和iOS两大平台各自占据着不可忽视的地位。本文将深入探讨这两大平台在开发环境、工具选择以及最终用户体验上的根本差异,并分析这些差异如何影响开发者的策略和用户的偏好。通过比较安卓的开放性与iOS的封闭性,我们将揭示不同平台下的开发哲学及其对生态系统的影响。
56 4

热门文章

最新文章