《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(8)-Charles如何进行断点调试

整理,保姆,系列,教程,玩转,charles,神器,如何,进行,断点,调试 · 浏览次数 : 342

小编点评

## 4.2 Charles设置断点测试接口是否正常工作: **步骤 1:使用 PostWoman Http插件测试接口是否正常工作** 1. 打开谷歌浏览器。 2. 在地址栏中输入 `localhost:5000/users/1801` 并点击「发送」。 3. 在弹出的窗口中,看到服务器返回的 JSON 数据。 4. 在实际结果中,看到李四的账户信息,如: ```json {"code":10000, "message":"success", "data": {"name": "李四", "balance": "123456"}} ``` **步骤 2:在发送请求时,进行请求的断点拦截,将1801修改成1802** 1. 使用 Postman 或其他接口测试工具发送以下请求: ``` POST /users/1801 Content-Type: application/json {"name": "李四", "balance": "123456"} ``` **步骤 3:进入 Edit Request 页面,将1801修改成1802** 1. 在 Postman 中创建一个新请求,并选择 "Edit Request"。 2. 在 "URL" 字段中输入 `localhost:5000/users/1801`。 3. 在 "Headers" 中添加一个 "Content-Type" 字段,值为 "application/json". 4. 在 "Body" 中添加一个 JSON 对象,如下所示: ```json {"name": "李四", "balance": "123456"} ``` 5. 点击 "Execute" 按钮发送请求。 **步骤 4:预期结果和实际结果一致,断点修改成功** 1. 在 Postman 中观察服务器的响应。 2. 再次发送请求,这次应该以 1802 为参数。 3. 再次观察服务器的响应,应该得到李四的账户信息。 **步骤 5:记录请求的断点修改日志** 1. 在 Postman 中创建一个新请求,并选择 "Edit Request"。 2. 在 "URL" 字段中输入 `localhost:5000/users/1801`。 3. 在 "Headers" 中添加一个 "Content-Type" 字段,值为 "application/json". 4. 在 "Body" 中添加一个 JSON 对象,如下所示: ```json {"name": "李四", "balance": "123456"} ``` 5. 点击 "Execute" 按钮发送请求。 6. 在 "Response" 中查看请求的断点修改日志。 **总结:** 使用 PostWoman Http 插件测试接口是否正常工作,可以确保断点修改成功,并将请求的断点修改日志记录下来,方便调试。

正文

1.简介

  Charles和Fiddler一样也有个强大的功能,可以修改发送到服务器的数据包,但是修改前需要拦截,即设置断点。设置断点后,开始拦截接下来所有网页,直到取消断点。这个功能可以在数据包发送之前,修改请求参数;在收到应答包,在js解析和浏览器渲染之前,修改返回结果。有了这个功能,开发者就可以修改不同参数测试server,同时也可以修改返回包测试自己的js函数,或测试页面渲染。那么怎样进行Charles断点操作呢?下面宏哥将为大家讲解一下。

2.Charles设置断点

Charles设置断点的具体操作步骤如下:

2.1方法一

1.启动Charles后,点击Proxy -> Breakpoint Settings...  ,如下图所示:

2.勾选 Enable Breakpoints ,如下图所示:

3.点击Add ,新增 断点规则 ,如下图所示 :

 断点规则字段说明:

Scheme : 拦截进行断点的接口方法,选项有 GET 和 POST
Protocol: 协议,选项有HTTP 和 HTTPS
HOST : 域名,或者IP地址
Path : 路径
Query:URL 中 ? 后面拼接的查询参数
Request : 在发送请求的时候打断点,可以修改请求内容,之后再把请求转发送给服务器
Response:在请求响应回来的时候打断点,可以修改响应内容,之后再把响应结果转发给客户端

【敲黑板知识点】
以上字段支持通配符,比如说Path ,填写 /test/api1 ,只支持拦截/test/api1 这一个接口,是全匹配,比如无法匹配 /test/api1/apis ;如果填写/test/* ,就能够匹配以/test/开头的所有接口,比如 /test/api1 、/test/api1/apis
所有的字段都是选填,如同我们常规理解的筛选条件一样,但是为了规则的有效性,Request 和 Response 必须二选一。

2.2方法二

1.接口处 鼠标右击,选择breakpoints(允许本接口使用breakpionts功能),如下图所示:

2.进入Breakpoint Settings...里,我们看到配置也添加到这里,双击配置规则,看到部分已经填好了,我们补充剩下的即可。request和response两个都勾选上了,如下图所示:

3.Charles 断点实践

找了半天没有免费的接口来演示实践,索性自己用python简单写一个mock接口算了。有时候测试需要调用第三方接口进行测试,但是第三方接口没有提供时,我们可以通过mock接口模拟第三方接口。

3.1安装第三方模块

通过pip install flask安装(flask是一个轻量级的web开发框架)。如下图所示:

3.2flask模块的使用

flask模块有如图四个部分,static是静态文件,存放js脚本、CSS、图片之类的文件;templates存放HTML文件,app.py存放接口。

app.run代表通过默认方式来访问,即通过127.0.0.1:端口号:接口路径来访问。

3.2.1参考代码
# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-02-09
@author: 北京-宏哥   QQ交流群:705269076
Project: 《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(8)-Charles如何进行断点调试
'''

# 3.导入模块
from flask import Flask

app = Flask(__name__)  # 创建对象


# 编写路由,用@app.route修饰把函数变接口,指定接口路径和方法
@app.route('/users',methods = ["GET"])

def users():
    return '''姓名&nbsp;&nbsp;&nbsp;电话<br/>  
                      张三&nbsp;&nbsp:&nbsp;17788889999<br/>
                      李四&nbsp;&nbsp:&nbsp;17788887777'''

if __name__ == '__main__':
    # app.run()  #使用默认方式启动项目
    app.run(host='0.0.0.0',port=5566,debug=True)  #以调试模式启动项目
    # host='0.0.0.0’,表示可以使用127.0.0.1、1ocahost、ip(192.168.18.3)访问接口
3.2.2运行结果

 3.2.3浏览器访问接口

在浏览器输入相应网址后显示如下图所示:

3.3动态路由

动态路由就是输入不同的URL,会有不同的内容返回。静态路由是永远一个接口对应着一个固定的URL,上面代码中的路由就是静态路由。

3.3.1参考代码
# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-02-09
@author: 北京-宏哥   QQ交流群:705269076
Project: 《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(8)-Charles如何进行断点调试
'''

# 3.导入模块
from flask import Flask

app = Flask(__name__)  # 创建对象

users_info ={  '1801': ['123456','张三',9000],
                '1802': ['123456','李四',9000],
                '1803': ['123456', '王五',9000],
            }

# 编写路由
@app.route("/users/<string:account>", methods=["GET"])  # 动态路由
def get_user(account):
    if account in users_info:
        info = users_info[account]
        return f'尊敬的{info[1]}先生/女士,您的账户余额为:{info[2]:.2f}元'
    else:
        return "账号不存在"

if __name__ == '__main__':
    # app.run()  #使用默认方式启动项目
    app.run(host='0.0.0.0',port=5566,debug=True)  #以调试模式启动项目
    # host='0.0.0.0’,表示可以使用127.0.0.1、1ocahost、ip(192.168.18.3)访问接口
3.3.2运行结果

 3.3.3浏览器访问接口

在浏览器输入相应网址后显示如下图所示:

3.4返回json格式数据

模块:jsonfy

使接口返回json格式的数据,json格式的数据也更方便后期的处理。

3.4.1参考代码
# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-02-09
@author: 北京-宏哥   QQ交流群:705269076
Project: 《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(8)-Charles如何进行断点调试
'''

# 3.导入模块
from flask import Flask
from flask import jsonify

app = Flask(__name__)  # 创建对象

users_info ={  '1801': ['123456','张三',9000],
                '1802': ['123456','李四',9000],
                '1803': ['123456', '王五',9000],
            }

#编写路由,并返回json格式的数据
@app.route("/users/<string:account>",methods=["GET"]) #动态路由
def get_user(account):
    if account in users_info:
        info = users_info[account]
        return jsonify({"code":10000,"message":"success","data":
        {"name":info[1],"balance":info[-1]}})
    else:
         return jsonify({"code":10001,"message":"account does not exist"})

if __name__ == '__main__':
    # app.run()  #使用默认方式启动项目
    app.run(host='0.0.0.0',port=5566,debug=True)  #以调试模式启动项目
    # host='0.0.0.0’,表示可以使用127.0.0.1、1ocahost、ip(192.168.18.3)访问接口
3.4.2运行结果

 3.4.3浏览器访问接口

在浏览器输入相应网址后显示如下图所示:

4.Charles断点实战

4.1测试接口

1.上边的本地接口:GET方法也已经写好了,主要是:输入不同的用户编码,显示不同账户的信息。然后我们就利用上边写好的接口,进行一下Charles断点实战。先用谷歌浏览器的PostWoman Http插件测试一下接口是否正常工作(你也可以用其他的接口测试工具)。如下图所示:

4.2Charles设置断点

4.2.1请求数据打断点

1.按照前边的步骤进行请求的断点设置,在发送请求时,进行请求的断点拦截,将1801修改成1802,预期响应结果为返回:李四的账户信息。如下图所示:

2.在发送请求时,拦截到接口,如下图所示:

3.进入 Edit Request 页面,将1801修改成1802,点击Execute 将接口放行转发给服务器。如下图所示:

4.预期结果和实际结果一致,断点修改成功。如下图所示:

【敲黑板知识点】

需要注意的是,使用 Breakpoints 功能将网络请求截获并修改过程中,整个网络请求的计时并不会暂停,所以长时间的暂停可能导致客户端的请求超时。

4.2.2响应数据打断点

1.按照前边的步骤进行响应的断点设置,在接到服务器的响应之后,进行响应的断点拦截,将响应结果:张三 修改成 北京-宏哥,预期响应结果为返回:北京-宏哥 的账户信息。如下图所示:

2.在接收响应数据时,拦截到接口,如下图所示:

3.进入 Edit Response 页面,将张三 修改成 北京-宏哥,点击Execute 将接口放行转发给客户端。如下图所示:

4.预期结果和实际结果一致,断点修改成功。如下图所示:

【敲黑板知识点】

Tips: 有一点需要特别强调,这样打断点修改数据的方式特别考验手速,以及每次操作的准确性。如果修改的时间过长,超出了客户端的 超时时间 ,那么本次的请求就会失效,哪怕最后请求响应成功,客户端也不认了,因为晚了。

 同理可以设置拦截post接口,宏哥在这里就不再赘述。

5.小结

打断点的意义:1.对request打断点:修改 请求参数,绕过前端,将修改过的参数传给服务端,看响应数据是否异常 2.对respones打断点:修改 响应数据,篡改服务端返回数据,查看前端处理是否异常。在实际工作中经常会遇到。

细心的小伙伴或者童鞋们会发现之前宏哥浏览器访问接口时json中含有的中文变成乱码。解决办法也相当简单只需要一行代码。

app.config['JSON_AS_ASCII'] = False

 5.1参考代码

# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-02-09
@author: 北京-宏哥   QQ交流群:705269076
Project: 《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(8)-Charles如何进行断点调试
'''

# 3.导入模块
from flask import Flask
from flask import jsonify

app = Flask(__name__)  # 创建对象

users_info ={  '1801': ['123456','张三',9000],
                '1802': ['123456','李四',9000],
                '1803': ['123456', '王五',9000],
            }

#编写路由,并返回json格式的数据
@app.route("/users/<string:account>",methods=["GET"]) #动态路由
def get_user(account):
    if account in users_info:
        info = users_info[account]
        return jsonify({"code":10000,"message":"success","data":
        {"name":info[1],"balance":info[-1]}})
    else:
         return jsonify({"code":10001,"message":"account does not exist"})

if __name__ == '__main__':
    # app.run()  #使用默认方式启动项目
    app.config['JSON_AS_ASCII'] = False #json中文乱码
    app.run(host='0.0.0.0',port=5566,debug=True)  #以调试模式启动项目
    # host='0.0.0.0’,表示可以使用127.0.0.1、1ocahost、ip(192.168.18.3)访问接口

修改后,再次访问接口,就不会出现乱码了,如下图所示:

与《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(8)-Charles如何进行断点调试相似的内容:

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(2)-charles安装激活(Mac)最新简单教程【亲测有效】

1.简介 上一篇中宏哥介绍了如何在Windows系统安装激活Charles,那么使用Mac系统的小伙伴或者童鞋们就不高兴了,怎么没有Mac的安装激活教程了。宏哥不能厚此薄彼,今天专门补充一篇在Mac上安装Charles并且将其激活。 2.Mac下载安装 2.1下载Charles 官网下载:https

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(3)-再识Charles

1.简介 上一篇通过宏哥的介绍想必各位小伙伴或者童鞋们对Charles已经有了一个理性地认识,今天宏哥在从Charles的外貌介绍和分享一下,让小伙伴们或者童鞋们再对Charles有一个感性的认识,今天主要是对Charles的界面进行一个详细的介绍。 2.Charles主界面概览 Charles的主

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(4)-Charles如何设置捕获会话

1.简介 前边几篇宏哥介绍了Charles界面内容以及作用。今天宏哥就讲解和分享如何设置Charles后,我们就可以愉快地捕获会话,进行抓包了。因为上一篇许多小伙伴看到宏哥的Charles可以分开看到request和response,而自己的却看不到,因此有点蒙,有点疑惑。同样的版本显示的界面却是不

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(5)-Charles如何设置捕获Https会话

1.简介 在大数据时代,互联网时代,个人信息安全尤为重要,网络安全在近日多起电信诈骗事情发酵下的情况下,引起国家,企业,个人对于互联网安全进一步的重视。而之前很多以http协议传输的网站出现的网站信息泄露,个人信息裸露在大数据的泳池中,让我们在遇到一个陌生网站的时候,都会格外考虑其安全性。通过认证S

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(6)-Charles安卓手机抓包大揭秘

1.简介 Charles和Fiddler一样不但能截获各种浏览器发出的 HTTP 请求,也可以截获各种智能手机发出的HTTP/ HTTPS 请求。 Charles也能截获 Android 和 Windows Phone 等设备发出的 HTTP/HTTPS 请求。 今天宏哥讲解和分享Charles如何

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(7)-Charles苹果手机手机抓包知否知否?

1.简介 Charles和Fiddler一样不但能截获各种浏览器发出的 HTTP 请求,也可以截获各种智能手机发出的HTTP/ HTTPS 请求。 Charles也能截获iOS设备发出的请求,比如 iPhone、iPad 和 MacBook 等苹果设备。 今天宏哥讲解和分享Charles如何截获苹果

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(8)-Charles如何进行断点调试

1.简介 Charles和Fiddler一样也有个强大的功能,可以修改发送到服务器的数据包,但是修改前需要拦截,即设置断点。设置断点后,开始拦截接下来所有网页,直到取消断点。这个功能可以在数据包发送之前,修改请求参数;在收到应答包,在js解析和浏览器渲染之前,修改返回结果。有了这个功能,开发者就可以

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(9)-Charles如何修改请求参数和响应数据-上篇

1.简介 宏哥之前一直用postman调接口比较多(web端),也非常容易上手和操作。但有时候想要去修改APP的页面展示,造数据又会比较麻烦,你自己造相对还好些,要是让开发造,还得低眉顺眼的去求人。通过今天的学习后,再也不担心这些烦心事。我们可以通过工具Charles就可以实现。可以用以下三种方法修

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(10)-Charles如何修改请求参数和响应数据-下篇

1.简介 宏哥之前一直用postman调接口比较多(web端),也非常容易上手和操作。但有时候想要去修改APP的页面展示,造数据又会比较麻烦,你自己造相对还好些,要是让开发造,还得低眉顺眼的去求人。通过今天的学习后,再也不担心这些烦心事。我们可以通过工具Charles就可以实现。可以用以下三种方法修

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(11)-Charles如何模拟弱网环境

1.前言 张三:“我写的软件好奇怪啊,在网络好的时候一点问题也没有,但是信号差的时候明显卡顿,看来我只能一直蹲在卫生间、电梯或者地铁(信号差)调bug了”。 Charles:“哈哈哈,傻孩子,我就自带弱网工具呀,在Proxy-->Throttle Setting下,使用前要记得勾选Enable Th