前端分析工具之 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,有啥好讲的呢)。

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

目录
相关文章
|
12天前
|
API 开发工具 Android开发
iOS 和 Android 平台的开发有哪些主要区别?
iOS与Android开发区别:iOS用Objective-C/Swift,App Store唯一下载渠道;Android用Java/Kotlin,多商店发布(如Google Play、华为市场)。设计上,iOS简洁一致,Android灵活可定制。开发工具,iOS用Xcode,Android用Android Studio。硬件和系统多样性,iOS统一,Android复杂。权限管理、审核流程及API各有特点,开发者需依据目标平台特性进行选择。
50 3
|
11天前
|
安全 Android开发
Android之OKHttp基本使用和OKHttp发送https请求安全认证
Android之OKHttp基本使用和OKHttp发送https请求安全认证
41 0
|
12天前
|
前端开发 Android开发 iOS开发
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
【4月更文挑战第30天】Flutter 框架实现跨平台移动应用,通过一致的 UI 渲染(Skia 引擎)、热重载功能和响应式框架提高开发效率和用户体验。然而,Android 和 iOS 的系统差异、渲染机制及编译过程影响性能。性能对比显示,iOS 可能因硬件优化提供更流畅体验,而 Android 更具灵活性和广泛硬件支持。开发者可采用代码、资源优化和特定平台优化策略,利用性能分析工具提升应用性能。
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
|
12天前
|
人工智能 安全 Android开发
【专栏】在人工智能时代,Android和iOS两大移动操作系统巨头正加速融合与创新
【4月更文挑战第27天】在人工智能时代,Android和iOS两大移动操作系统巨头正加速融合与创新。Android以其开放性占据广阔市场,集成AI功能如语音助手;而iOS以其稳定性和生态优势,如Siri,提供卓越体验。两者在AI技术、应用场景上相互借鉴,拓展至医疗、教育等领域,并逐步打通生态系统。然而,技术竞争、数据隐私和标准不一是挑战,新市场需求、技术创新和产业合作则带来机遇。未来,二者将继续推动AI发展,为社会进步贡献力量。
|
3天前
|
安全 开发者 iOS开发
iOS16系统手机设置开启开发者模式才能安装ipa包
iOS16系统手机设置开启开发者模式才能安装ipa包
12 1
|
3天前
|
iOS开发
iOS13.6.1系统XR手机图文按钮显示不全问题
iOS13.6.1系统XR手机图文按钮显示不全问题
10 0
|
12天前
|
存储 监控 安全
打造高效移动办公环境:Android与iOS平台的集成策略
【5月更文挑战第15天】 在数字化时代,移动办公不再是一种奢望,而是日常工作的必需。随着智能手机和平板电脑的性能提升,Android与iOS设备已成为职场人士的重要工具。本文深入探讨了如何通过技术整合,提高两大移动平台在企业环境中的协同工作能力,重点分析了各自平台上的系统集成策略、安全性考虑以及跨平台协作工具的应用。通过对现有技术的剖析与案例研究,旨在为读者提供一套实用的移动办公解决方案。
|
12天前
|
Android开发
Android中Glide加载Https图片失败的解决方案
Android中Glide加载Https图片失败的解决方案
20 1
|
12天前
|
缓存 Android开发 iOS开发
打造高效移动应用:Android与iOS性能优化策略
【4月更文挑战第29天】 在移动设备日益成为用户日常互动的主要平台的今天,应用程序的性能已成为决定其成功的关键因素之一。本文将探讨针对Android和iOS平台的性能优化技巧,涵盖内存管理、多线程处理、网络请求优化以及用户界面的流畅性提升等方面。通过分析不同操作系统的架构特点,我们旨在提供一套综合性的策略,帮助开发者构建快速、响应迅捷且用户体验良好的应用。
|
12天前
|
网络协议 安全 API
Android网络和数据交互: 什么是HTTP和HTTPS?在Android中如何进行网络请求?
HTTP和HTTPS是网络数据传输协议,HTTP基于TCP/IP,简单快速,HTTPS则是加密的HTTP,确保数据安全。在Android中,过去常用HttpURLConnection和HttpClient,但HttpClient自Android 6.0起被移除。现在推荐使用支持TLS、流式上传下载、超时配置等特性的HttpsURLConnection进行网络请求。
16 0