热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Web调试工具Charles使用心得

目录一、安装与使用二、抓手机的请求包http请求抓包https请求抓包iPhone手机抓https包安卓(小米)手机抓https包三、用本地文件替换线上

目录

  • 一、安装与使用
  • 二、抓手机的请求包
    • http请求抓包
    • https请求抓包
      • iPhone手机抓https包
      • 安卓(小米)手机抓https包
  • 三、用本地文件替换线上文件
    • 替换测试环境的文件
    • 替换生产环境的文件(跨域)
  • 四、其他
    • 筛选指定域下的请求
  • 参考文档

@蒋欢,美团点评前端工程师,2年工作经验,主要负责大众点评“点餐H5"和"美团点评智慧餐厅"小程序的开发。本文首发于 蒋欢的知乎专栏 ,敬请关注。

正文从这开始~

Charles 是一个网络代理工具,经常用来进行 Mac 下的 Web 调试工作,功能类似于 Windows 环境下的 Fiddler 工具。因为工作中经常会用到,所以决定写一篇总结文章。

注意,这一篇文章主要用来记录在使用过程中遇到的疑难问题和解决方法。常规的 Charles 安装与使用方法请查阅文末的 参考文档 ,本文不再详述。

一、安装与使用

从Charles 官网下载 并安装软件包。

基本的使用方法本文就不作介绍了,如果不清楚的话,请移步这篇 网络教程 ,写的十分详细。

下面具体分析在使用中遇到的问题。

二、抓手机的请求包

http请求抓包


首先,需要获取本机的 IP 地址。

打开 Charles 后,在 Help 选项下选择 Local IP Address 可以看到本机的 IP 地址。如果获取的是 IPv6 地址。也可以按住 Mac 上的 option 键点击 WIFI 图标获得 IPv4 格式地址。如下图所示:

获取本机IP地址

在 iPhone 上的 WIFI 手动设置 HTTP 代理,服务器地址为电脑的 IP 地址,端口号为8888。 然后在 Charles 的工具栏上打开 Recording 按钮,用手机浏览器访问页面或打开 App,在 Charles 中即可看到 http 请求包。

https请求抓包


iPhone手机抓https包

iPhone 抓取 https 的包,网上配置很多,这里就不详细介绍了,附 网络教程 供大家参考。

补充两点技巧:

  • 技巧1:按以上操作设置后,如果 iPhone 抓取 https 请求包时显示 unknown
    则说明Charles的证书在只在本机安装了,但还未被设为信任,需要按照此步骤进行设置:通用 —> 关于本机 —> 证书信任设置 —> CA勾选

https请求Unknown

  • 技巧2:针对 Proxy —> SSL Proxying Settings 的配置地址,如果不想每个域名都设置一次,可以直接把 Host 和 Port 都设为 *,允许抓取所有域名的请求包。

允许抓取所有SSL代理的数据包

安卓(小米)手机抓https包

安卓手机的抓包与 iPhone 相似,都需要按照以下4步来抓 https 请求包:

  1. 电脑装证书
  2. 移动设备安装证书
  3. Charlse 添加 SSL Proxying
  4. 手机使用 Mac 代理访问目标域名

补充两种安装失败情况及解决办法

  • 情况1:若遇到在模拟器/手机的浏览器中输入 charlesproxy.com/getssl 不是弹一个框,而是出现了下图的情况,可能是因为手机没有将电脑的 IP 地址设为代理(端口号为8888)

未将手机设置代理即访问getssl链接

  • 情况2:小米手机安装证书提示**“没有可安装的证书”**,解决方式:

a、打开 Charles 的 HELP -> SSL Proxying -> Export Charles Root Certification and Private Key,输入任意密码,导出 pem 文件。

Charles 导出 Pem 文件提取证书

b、导出后,用微信或者其他方式将 pem 文件传到安卓手机里。在 WLAN设置 —> 安装证书里打开该文件,输入导出时设置的密码就行了。

例如通过微信方式传递的文件路径为:WLAN -> 高级设置 -> 安装证书 -> Tencent文件夹 -> MicroMsg文件夹 -> Download文件夹

小米手机安装证书

Charles原理解析

Charles 抓包安装的证书,电脑和手机是配对的。不管是通过访问 charlesproxy.com/getssl(因为 Mac 已经开启代理,所以访问这个地址实际上返回的是本机的 Charles 证书,而并没有访问 charlesproxy.com 这个网站),还是通过手动安装,实际上安装的都是对应本机的 SSL 证书。所以如果安装证书的手机和电脑不是配对关系的话,即使两者都有证书也是不能抓包的。

三、用本地文件替换线上文件

替换测试环境的文件


a、首先需要 Chrome 安装 Proxy SwitchyOmega 插件并配置 Charles 代理,这样 Chrome 下的链接才会走 Charles 发送。

SwitchyOmega 插件配置

记得要切换到 Charlse 代理

b、打开Charles,选择 Tools —> No caching Seting,勾选 Enable No Caching,确保不会因为文件缓存影响代码生效。

Charles不启用缓存设置

另外,Chrome 控制面板里的 Network 设置,最好也勾选 Disable Cache 选项。这样可以在浏览器调试阶段也不启用缓存,防止修改了代码,但因为浏览器缓存而未生效。

Chrome不启用缓存设置

c、单个文件的替换。选择 Tools —> Map Local Settings 将线上文件映射到本地文件, 点击选择要替换的文件(例如:mm-order-list.*.js)。Protocol 如果置空,则默认匹配所有协议。
注意:webpack打包的项目可能还需要根据实际情况映射公共文件,如 manifest.*.js 和 common.*.js 才可以完成替换。

Charles替换单个文件配置

d、文件夹整体替换。按照步骤c,我们已经可以进行单文件替换了,但单独设置太麻烦。所以我们直接进行文件夹整体替换。以配置 app-menuorder-h5 的项目为例,Host 和 Local Path 配置如下图所示:

Charles替换文件夹 Map Local Setting

配置完本地文件映射 Map Local Settings 后,还需要配置 Rewrite 选项,实现对文件的重写替换。通过正则表达式来替换对应目录下所有文件。

Charles替换文件夹 Rewrite Setting

e、最后,刷新浏览器,如果 http 请求的 Respone Header 里有 X-Charles-Map-Local 字段则代表本地文件替换成功。

文件替换成功效果图

替换生产环境的文件(跨域)


用本地文件替换生产环境的文件同样需要设置 Map Local Settings 和 Rewrite Settings 两项。

a、设置 Map Local Settings 进行文件目录映射,只需要把 Host 改成静态文件存储的域名即可,本例 Host: www.dpfile.com

b、设置 Rewrite Settings,这里需要分成两步:

第一步,指定替换文件,注意线上的文件因为被压缩过,所以文件名中可能会有 “min” 字段。

生产环境设置Map Local Settings 文件替换目录

第二步,由于 m.dianping.com 引用映射后的 www.dpfile.com 域下的文件,从而导致跨域问题。

请注意这里需要分情况讨论:

  • 情况1:Response Header 不包含 Access-Control-Allow-Origin 与 Access-Control-Allow-Credentials 字段,则需手动添加这两个字段。

生产环境产生的跨域问题

所以需要对 dpfile.com 域下的 Response Header 添加字段 Access-Control-Allow-Credentials: true 与 Access-Control-Allow-Origin: *,从而允许 dpfile.com 域下的文件被其他域所引用。

通过给Response Header添加字段,允许dpfile域下文件被引用

  • 情况2:Response Header 如已包含 Access-Control-Allow-Origin 字段,则只需添加 Access-Control-Allow-Credentials。不能再添加 Access-Control-Allow-Origin,否则会报错。

Response Header 已有 Access-Control-Allow-Origin 字段,重复添加报错

按以上配置设置完毕后,即可用本地文件替换生产环境线上文件:)

四、其他

筛选指定域下的请求


由于 Charles 会抓取手机发出的全部请求包,为了能快速定位我们需要的请求,可以对 Charles 的抓包请求进行筛选,具体方法是:Setting —> Recording Setting —> Include,设置只展示特定域的请求包。

Charles筛选特定域下的请求

参考文档

  • 详解Charles
  • iPhone安装charles
  • Charles抓取https时一直显示unknown
  • Charles https抓包 — Android —— 美团谢敏



推荐阅读
  • iOS超签签名服务器搭建及其优劣势
    本文介绍了搭建iOS超签签名服务器的原因和优势,包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势,即一个证书只能安装100个,成本较高。文章还详细介绍了超签的实现原理,包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后,还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]
  • 搭建Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境的详细步骤
    本文详细介绍了搭建Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境的步骤,包括环境说明、相关软件下载的地址以及所需的插件下载地址。 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了markdown[软件代理设置]相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 在Kubernetes上部署JupyterHub的步骤和实验依赖
    本文介绍了在Kubernetes上部署JupyterHub的步骤和实验所需的依赖,包括安装Docker和K8s,使用kubeadm进行安装,以及更新下载的镜像等。 ... [详细]
  • 本文详细介绍了GetModuleFileName函数的用法,该函数可以用于获取当前模块所在的路径,方便进行文件操作和读取配置信息。文章通过示例代码和详细的解释,帮助读者理解和使用该函数。同时,还提供了相关的API函数声明和说明。 ... [详细]
  • http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的,最大不能超过XX ... [详细]
  • HTML学习02 图像标签的使用和属性
    本文介绍了HTML中图像标签的使用和属性,包括定义图像、定义图像地图、使用源属性和替换文本属性。同时提供了相关实例和注意事项,帮助读者更好地理解和应用图像标签。 ... [详细]
  • Ubuntu安装常用软件详细步骤
    目录1.GoogleChrome浏览器2.搜狗拼音输入法3.Pycharm4.Clion5.其他软件1.GoogleChrome浏览器通过直接下载安装GoogleChro ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • 本文介绍了Windows操作系统的版本及其特点,包括Windows 7系统的6个版本:Starter、Home Basic、Home Premium、Professional、Enterprise、Ultimate。Windows操作系统是微软公司研发的一套操作系统,具有人机操作性优异、支持的应用软件较多、对硬件支持良好等优点。Windows 7 Starter是功能最少的版本,缺乏Aero特效功能,没有64位支持,最初设计不能同时运行三个以上应用程序。 ... [详细]
  • 如何提高PHP编程技能及推荐高级教程
    本文介绍了如何提高PHP编程技能的方法,推荐了一些高级教程。学习任何一种编程语言都需要长期的坚持和不懈的努力,本文提醒读者要有足够的耐心和时间投入。通过实践操作学习,可以更好地理解和掌握PHP语言的特异性,特别是单引号和双引号的用法。同时,本文也指出了只走马观花看整体而不深入学习的学习方式无法真正掌握这门语言,建议读者要从整体来考虑局部,培养大局观。最后,本文提醒读者完成一个像模像样的网站需要付出更多的努力和实践。 ... [详细]
  • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
  • Unity3D引擎的体系结构和功能详解
    本文详细介绍了Unity3D引擎的体系结构和功能。Unity3D是一个屡获殊荣的工具,用于创建交互式3D应用程序。它由游戏引擎和编辑器组成,支持C#、Boo和JavaScript脚本编程。该引擎涵盖了声音、图形、物理和网络功能等主题。Unity编辑器具有多语言脚本编辑器和预制装配系统等特点。本文还介绍了Unity的许可证情况。Unity基本功能有限的免费,适用于PC、MAC和Web开发。其他平台或完整的功能集需要购买许可证。 ... [详细]
  • Summarize function is doing alignment without timezone ?
    Hi.Imtryingtogetsummarizefrom00:00otfirstdayofthismonthametric, ... [详细]
  • POCOCLibraies属于功能广泛、轻量级别的开源框架库,它拥有媲美Boost库的功能以及较小的体积广泛应用在物联网平台、工业自动化等领域。POCOCLibrai ... [详细]
author-avatar
王友仁国珍_326
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有