在Chrome浏览器中进行数据抓包
一、Chrome开发者工具简介
Chrome开发者工具是Chrome浏览器自带的一个调试工具，它提供了前端开发、性能调试、网络监控等多种功能，其中最常用的是“网络（Network）”面板。通过它，我们可以监控网站发出的所有网络请求，包括页面加载时的静态资源请求（HTML、CSS、JS等）以及动态的API接口请求。
1.1 如何打开Chrome浏览器开发者工具
打开Chrome浏览器的开发者工具有以下几种方式：
- 快捷键：
- Windows/Linux：
Ctrl + Shift + I - macOS：
Cmd + Option + I
- Windows/Linux：
- 菜单操作：
右键点击页面，选择“检查”（Inspect），即可打开开发者工具。
1.2 开发者工具的功能简介
Chrome开发者工具包含多个面板，最常用的包括：
- Elements（元素）：查看和编辑HTML、CSS。
- Console（控制台）：调试JavaScript代码，查看日志输出。
- Sources（源代码）：调试JavaScript、设置断点等。
- Network（网络）：抓包、查看和分析网络请求及响应。
本文的重点是 Network（网络） 面板，它是进行数据抓包的核心工具。
二、Network面板的基础使用
2.1 打开Network面板
在开发者工具中，点击顶部导航栏中的“Network”选项，即可进入网络面板。
在这里，你可以实时查看页面中所有网络请求的详细信息，包括请求URL、请求方法（GET、POST等）、响应状态码、响应时间、请求数据等。
2.2 请求过滤与分类
为了方便查找特定的请求，Chrome提供了强大的请求过滤和分类功能：
-
按类型过滤：在网络面板的工具栏上方，可以通过点击不同的类型标签（如XHR、JS、CSS、Img等）来筛选请求。例如，点击“XHR”可以只显示AJAX请求（通常为API请求）。
-
按关键词过滤：可以在面板顶部的过滤框中输入关键词（如URL的一部分）来查找特定请求。
3.暂停抓包：点击左上角的红色“stop”（暂停）按钮可以暂停抓包。
4. 清除记录：点击“clear”（清空）按钮可以清除当前的请求记录。
2.3 查看请求和响应详情
每一个请求都会以表格形式列出，点击某个请求后可以查看它的详细信息，具体包括：
- Headers（请求头和响应头）：请求和响应中的所有头部信息，包含请求的URL、方法、状态码等。
- Preview（预览）：以易读格式展示响应数据。
- Response（响应）：原始响应数据。
- Timing（时间）：显示请求的各个阶段耗时，包括DNS解析、TCP连接、发送请求、等待响应和接收数据的时间。
三、实际操作：使用Chrome抓取API请求
3.1 抓包步骤
-
打开目标网站：首先在浏览器中访问
https://www.httpbin.org/get，页面会自动发送一个GET请求，并展示请求返回的JSON数据。
-
打开开发者工具的Network面板：按下快捷键
Ctrl + Shift + I（Windows/Linux）或Cmd + Option + I（macOS），打开Chrome的开发者工具。然后点击顶部导航栏中的“Network”选项进入网络面板。 -
访问接口并查看请求：访问
https://www.httpbin.org/get后，浏览器会发起GET请求。此时，你会在Network面板中看到请求。
-
查看请求详情：
- 点击目标请求后，可以在右侧查看请求的详细信息。
- Headers：在Headers选项卡下，可以查看请求头（Request Headers）和响应头（Response Headers）的所有信息。例如，查看请求的URL、HTTP方法（GET）、User-Agent等信息。你还可以看到服务器返回的状态码（如200 OK）等关键信息。
-
分析响应数据：在Response面板中，观察返回的JSON数据，可以看到服务器如何处理和返回请求的相关信息。
-
Response：切换到Response选项卡，你可以查看服务器返回的响应内容。在这个例子中，返回的响应是一个JSON格式的数据。
- args 表示请求的查询参数（这里为空，因为我们没有发送额外参数）。
- headers 是客户端发送的请求头部。
- origin 是请求来源的IP地址。
- url 显示了访问的完整URL。
-
3.2 自定义请求参数进行测试
为了更深入了解接口的工作方式，我们可以尝试向 https://www.httpbin.org/get 发送一些查询参数，并抓取这些带有参数的请求。步骤如下：
-
手动添加查询参数：在浏览器地址栏中，修改URL以添加查询参数。访问：
https://www.httpbin.org/get?name=John&age=30这将发送一个带有
name和age参数的GET请求。
-
查看 Network 面板：此时在Network面板中，你可以找到对应的请求。在 Payload 选项卡中，Query String Parameters 部分会显示出这些请求参数：
-
分析响应数据：在Response选项卡中，你可以看到服务器返回的JSON数据，服务器会解析并返回我们传递的查询参数：
可以看到，
args部分显示了我们传递的查询参数，表示服务器成功接收并解析了这两个参数。
3.4 POST请求的抓包示例
除了GET请求，HTTPBIN还提供了POST请求的测试接口。我们可以使用 https://www.httpbin.org/post 来测试抓取POST请求。POST请求与GET请求的不同之处在于，POST请求的参数通常在请求体中传递。
-
访问POST接口：可以通过工具如Postman或者直接编写HTML表单来发送POST请求，访问
https://www.httpbin.org/post，并在请求体中包含一些数据。例如：{ "username": "testuser", "password": "123456" } -
查看Network面板中的POST请求：
- 在Network面板中，可以找到POST请求，点击该请求后，查看其Headers部分中的请求方法（POST）以及请求体的内容。
- 在Request Payload部分，查看POST请求中发送的数据。
- 同样，在Response部分，你可以看到服务器返回的响应内容，通常是回显我们发送的请求数据。
-
POST请求的响应：如下是服务器返回的示例响应：
{ "args": { }, "data": "{\"username\": \"testuser\", \"password\": \"123456\"}", "files": { }, "form": { }, "json": { "username": "testuser", "password": "123456" }, "headers": { "Content-Type": "application/json", "Host": "www.httpbin.org", "User-Agent": "Mozilla/5.0" }, "origin": "203.0.113.1", "url": "https://www.httpbin.org/post" }可以看到，
json部分回显了我们通过POST请求发送的数据。
四、保存抓包记录
在实际的接口测试中，抓包只是第一步，有时我们还需要将抓到的数据保存下来，方便后续的分析或提交给开发人员。Chrome的Network面板支持将抓包数据导出为HAR文件。
4.1 导出HAR文件
HAR（HTTP Archive）是一种记录所有网络活动的文件格式，包含了请求、响应、Cookies、时间消耗等信息。
导出HAR文件的步骤如下：
- 在Network面板的任意空白处右键单击，选择“Save all as HAR with content”。
- 保存文件到本地。
导出的HAR文件可以通过其他工具（如Postman、Fiddler）进行进一步分析。
4.2 使用HAR文件进行回放
通过Chrome开发者工具或第三方工具，我们可以对HAR文件中的请求进行回放，模拟一次真实的请求操作。这对于调试和重现问题非常有帮助。
五、常见问题及解决方案
5.1 为什么抓不到请求？
常见原因如下：
- 页面缓存：如果浏览器缓存了请求的资源，它们可能不会再次发出请求。解决方法是点击Network面板的“Disable cache”选项，确保所有请求都不受缓存影响。
- 未发起请求：某些请求是由JavaScript动态触发的，如果页面没有交互，可能不会发出请求。你可以尝试点击页面上的按钮或执行操作以触发请求。
- 请求过于复杂：如果页面的请求量很大，可以通过关键词或类型过滤来快速找到你需要的请求。
5.2 如何抓取移动端请求？
Chrome开发者工具还支持模拟移动设备，并抓取移动端请求。我们还可以在开发者工具中点击左上角的“设备工具栏切换”按钮（类似手机的图标），选择需要模拟的设备，然后重复抓包操作。
总结
通过Chrome浏览器的开发者工具，我们可以轻松地进行网络抓包，查看并分析HTTP请求和响应数据。这对于接口测试、前后端联调以及排查网络问题都非常有帮助。