前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >又是一个开发效率神器

又是一个开发效率神器

作者头像
iiopsd
发布2022-12-23 08:55:59
4530
发布2022-12-23 08:55:59
举报
文章被收录于专栏:iiopsd技术专栏iiopsd技术专栏

背景

在开发的过程中,经常需要查看接口数据,web端可以使用浏览器的开发者工具查看,但是手机端微信小程序等就比较难以查看接口信息。

Charles

Charles是一款Http代理监听工具,可以让开发者查看通过这个代理的所有连接信息,包括请求数据、相应数据和请求头等信息。

Charles主要功能有:

  • 抓取http和http是数据包
  • 重发网络请求,方便调试
  • 支持修改口请求数据和返回结果、
  • 限制网络速度,模拟低网速场景

Charles实践

光说不练假把式,看再多理论都不是自己的,只有自己动手尝试了才能成为自己的东西。

Charles安装

  1. 安装好java环境(具体操作自行百度)
  2. 去官网下载安装包安装Charles

PC端抓包

安装证书

1、代理 -> windows代理打勾

image.png
image.png

2、选择帮助 -> SSL 代理 -> 安装Charles Root 证书

image.png
image.png

3、安装证书

image.png
image.png
image.png
image.png

将证书安装在“受信任的根证书颁发机构”

image.png
image.png
image.png
image.png

4、代理 -> 设置SSL代理设置

image.png
image.png
image.png
image.png

5、选择帮助 -> SSL 代理 -> 在移动设备或远程浏览器上安装Charles Root 证书

image.png
image.png

浏览器输入chls.pro/ssl

image.png
image.png

打开浏览器设置 -> 隐私设置和安全性 —> 安全 -> 管理设备证书(管理您设备上的HTTPS/SSL证书)

image.png
image.png
image.png
image.png

浏览 -> 选择所有文件(才能展示下载的证书)

image.png
image.png
image.png
image.png

完成

image.png
image.png

pc测试抓包

访问网站就可以看到接口请求数据了

image.png
image.png

应用

假设测试或者前端同学要验证下收藏这个数量是否能正常显示千分符,那可能就要后端同学改数据或者自己造数据,现在我们有一种新的解决方法,可以使用Charles的debug功能来完成对接口请求数据和返回结果的修改,可以快速复现特殊场景,大大提高了开发效率。

image.png
image.png

在Charles中找到借口,右键 -> 断点打勾

image.png
image.png

刷新页面,就会重新调用接口进入断点,可以修改请求参数,我们这边不修改

image.png
image.png
1670504177746.jpg
1670504177746.jpg

查看页面展示发现数据已经被修改了

image.png
image.png

iphone抓包

查看电脑ip,帮助 -> 本机ip

image.png
image.png

手机连接和电脑同一个局域网的wifi,然后点感叹号“!” -> 配置代理 -> 手动 -> 储存

服务器IP:PC机器的IP

端口号:8888

image.png
image.png
image.png
image.png
image.png
image.png

Charles上会弹出确认窗口点击允许(allow)

选择帮助 -> SSL 代理 -> 在移动设备或远程浏览器上安装Charles Root 证书

image.png
image.png

手机浏览器访问:chls.pro/ssl 下载证书

image.png
image.png
image.png
image.png

打开手机设置 -> 通用 -> VPN和设备管理 —> 选择已下载证书 -> 安装

image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png

然后去手机设置 -> 通用 -> 关于本机 -> 证书信任设置 -> 信任证书

image.png
image.png
image.png
image.png

至此就完成了iphone的证书安装,现在打开微信小程序就可以看到接口数据了

image.png
image.png

android抓包

Charles在Android安装证书的时候需要root权限,暂时还未想到解决方案,之后再补充。

常见问题解决

1、手机无法抓包的问题

检查是否配置好代理IP,端口号

检查是否与电脑在同一个局域网

检查是否关闭防火墙,代理,翻墙软件

弹出询问点击“allow”或者“deny”时,误点“deny”,关闭charles重启,手机再次浏览则会重新弹出询问

2、证书过期重置

工作中使用charles对app进行抓包,突然有一天,无法抓包了,显示Unknown。。。。

然后去描述文件里查看,提示证书已过期。

问题:

如何更换证书?

如何解决:

在charles -> 帮助 -> 重置证书

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-12-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • Charles
  • Charles实践
    • Charles安装
      • PC端抓包
        • 安装证书
        • pc测试抓包
        • 应用
      • iphone抓包
        • android抓包
        • 常见问题解决
          • 1、手机无法抓包的问题
            • 2、证书过期重置
            相关产品与服务
            SSL 证书
            腾讯云 SSL 证书(SSL Certificates)为您提供 SSL 证书的申请、管理、部署等服务,为您提供一站式 HTTPS 解决方案。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档