在之前更新了几篇《JS逆向教程》系列课程后，发现很多小伙伴对”抓包”这个基础但至关重要的技能还是一知半解。因此，我决定为大家更新《Chrome浏览器抓包系列教程》，本系列将分为基础篇、过滤篇 和 控制篇三部分，手把手详细教大家如何掌握Chrome抓包工具。本文是基础篇，将专注于最核心的抓包操作。
本文目录
- 补充：Chrome浏览器基础配置（国内用户必看）
- 1. 如何打开Chrome开发者工具（抓包面板）
- 2. 认识网络抓包面板（Network）
- 3. 认识请求头信息
- 4. 详解载荷（Payload）信息
- 5. 理解预览（Preview）功能
- 6. 实战抓取GET请求
- 7. 实战抓取POST请求
- 8. 常见问题与解决方案
- 9. 总结
- 10. 下一步挑战
0.补充：Chrome浏览器基础配置（国内用户必看）
为了确保教程的顺利进行，特别是对于国内网络环境下的用户，我们首先需要进行两项简单的浏览器配置。这能避免后续开发工具出现搜索不了、界面不友好等问题。
0.1. 将浏览器默认搜索引擎改为百度
- 点击Chrome浏览器右上角的三个点，选择“设置”。
- 在左侧菜单中，选择“搜索引擎”。
- 将“地址栏中使用的搜索引擎” 改为 “百度”。
0.2. 将开发者工具（Web工具箱）界面改为中文
- 按
F12打开开发者工具（Web工具箱）。 - 点击开发者工具右上角的三个点（或齿轮图标），选择“设置”（Preferences）。
- 在设置面板中，找到“语言”（Language）选项。
- 将其下拉菜单选择为“中文（Chinese）”。
- 关闭开发者工具再重新打开
F12，界面即变为中文。
完成以上两步配置，你的Chrome浏览器就已经为接下来的抓包学习之旅做好了最佳准备！现在，让我们开始正式的学习。
1. 如何打开Chrome开发者工具（抓包面板）
打开Chrome浏览器，主要有两种方式可以启动我们强大的Chrome抓包工具——开发者工具：
- 快捷键（最推荐）：在网页任意位置，直接按下键盘上的
F12键。 - 鼠标操作：点击浏览器右上角的
三个小点-> 选择更多工具-> 点击开发者工具。
打开开发者工具后，你会看到多个面板（如元素, 控制台等），我们需要点击顶部的 （网络）面板，这才是我们进行数据抓包实战的主战场。
2. 认识网络抓包面板（Network）
打开网络面板后，它可能还是空的。这时，你只需要刷新一下当前网页（按F5或点击刷新按钮），所有网络请求就会像瀑布一样展示出来。
这个面板主要分为几个区域：
- 控制栏：最上面一排按钮。
- 记录按钮（红色圆点）：控制是否开始捕获请求。
- 清空按钮（圆圈斜杠图标）：清空当前的请求列表。
- 筛选按钮（漏斗图标）：用于过滤请求类型（如XHR/JS/Img等）。
- 搜索按钮 （放大镜图标）：用于搜索参数
- 请求列表：展示所有抓到的请求，每一列都有重要信息：
- 名称：请求的URL地址。
- 状态：响应状态码（200成功，404未找到等）。
- 类型：请求类型（如XHR/Fetch是常见的Ajax请求）。
- 启动器：发起请求的源文件。
- 大小：响应内容的大小。
- 时间：请求耗时。
- 详情面板：点击某个请求后，下方会显示该请求的详细信息，这是分析的核心。
3. 认识请求头信息
在请求列表中点击任意一条请求，默认会打开标头（Headers）选项卡，这是分析请求的基础。
- 常规信息：显示请求的URL、请求方法（GET/POST等）、状态码和远程地址。
- 响应头（Response Headers）：服务器返回的HTTP头信息，包含内容类型、编码方式等。
- 请求头（Request Headers）：浏览器发送给服务器的头信息，包含Cookie、User-Agent等重要标识。
通过分析请求头信息，我们可以了解请求的基本属性和服务器的响应情况，这是后续分析的基础。
4. 详解载荷（Payload）信息
点击载荷（Payload）选项卡，这里显示的是向服务器发送的数据内容：
- 查询字符串参数（Query String Parameters）：GET请求的参数会显示在这里，以键值对形式展示。
- 表单数据（Form Data）：POST请求中通过表单提交的数据，如登录时的用户名和密码。
- 请求负载（Request Payload）：现代Web应用中常见的JSON格式数据提交方式。
载荷信息对于理解数据交互至关重要，特别是在分析登录、搜索等功能的实现原理时。
5. 理解预览（Preview）功能
预览（Preview）选项卡提供了服务器返回数据的格式化视图：
- 结构化展示：JSON数据会自动格式化为可折叠的树状结构，便于查看。
- 图像预览：如果是图片资源，会直接显示缩略图。
- HTML/CSS预览：网页资源会以渲染后的形式展示。
预览功能极大方便了数据分析，特别是处理复杂的JSON响应时，可以快速定位所需数据字段。
6. 实战抓取GET请求
目标：抓取小说网站搜索产生的GET请求
首先打开小说网站（search.zongheng.com），然后按F12打开开发者工具并切换到网络面板。确保顶部的记录按钮为红色开启状态，这时候我们可以看到网络请求开始被捕获。
为了更清晰地观察搜索请求，我们可以先点击清空按钮（圆圈斜杠图标）把当前的请求列表清空。然后在搜索框中输入”斗破苍穹“，点击”放大镜”进行搜索。
点击搜索后，在抓包列表中找到第一条名称为 s?keyword=%E6%96%97%E7%A0%B4%E8%8B%8D%E7%A9%B9 的请求并点击它。这里可以看到搜索词”斗破苍穹”被进行了URL编码。
切换到载荷选项卡，在查询字符串参数中可以看到清晰的参数信息：keyword: 斗破苍穹。这里显示的是解码后的原始搜索词。
最后查看预览选项卡，这里展示的就是网站返回的搜索结果列表，包含了搜索到的小说信息，与网页上显示的搜索结果完全对应。
关键观察点：GET请求的参数直接暴露在URL中，虽然中文字符会进行URL编码转换，但在载荷面板中会显示解码后的原始值。预览面板展示的JSON数据与网页展示内容完全对应。
7. 实战抓取POST请求
目标：抓取登录操作产生的POST请求
首先我们需要找到一个有登录功能的网站进行测试。在百度搜索”管理系统登录入口“可以很容易找到各种登录页面，我们随便选择一个进入测试。
打开开发者工具的网络面板并确保记录按钮为红色开启状态。在登录页面输入测试用户名和密码，然后点击登录按钮。
在抓包列表中可以看到有两条相关的请求：第一条是黄色的preLogin POST请求，第二条是灰色的preLogin OPTIONS请求。我们点击黄色的POST请求进行分析。
切换到载荷选项卡查看请求载荷，这里会显示提交的表单数据。仔细观察会发现，password字段的值通常是一长串乱码，而不是我们实际输入的密码，这是因为密码在传输前进行了加密处理。
查看预览选项卡，可以看到服务器返回的响应信息，其中包含msg: "用户名或者密码错误"字段，这正好对应了网站登录按钮下方显示的提示信息。
关键观察点：POST请求的数据包含在请求体中，敏感信息如密码会进行加密处理。OPTIONS请求是浏览器的预检请求，用于检查服务器是否允许实际请求。服务器返回的JSON消息与网页显示的错误提示完全对应。
8. 常见问题与解决方案
- 问题1：刷新页面后，Network面板是空的？
解决方案：检查顶部的记录按钮是否是红色亮起状态。如果不是，点击它开启记录。 - 问题2：请求太多，找不到我需要的那个？
解决方案：使用筛选功能。比如找Ajax请求，就点击漏斗图标下的”XHR”。也可以直接在筛选框输入请求URL的关键字。 - 问题3：抓不到登录或提交数据的请求？
解决方案：确保在执行操作（如点击登录按钮）之前就已经打开了Network面板并开始记录。最好先清空列表，再操作。 - 问题4：看到请求但看不到提交的数据？
解决方案：对于POST请求，数据通常在Payload标签页的Form Data或Request Payload中查看。
9. 总结
通过这篇Chrome抓包教程的基础篇，你已经学会了如何打开Chrome开发者工具的Network面板，识别并抓取GET和POST请求，以及理解每个请求的请求头、载荷、预览等核心信息。这是所有Web数据分析、数据抓包实战和爬虫开发的基石。
10. 下一步挑战
在下一篇《Chrome抓包工具完全掌握(2)：抓包进阶技巧实战 – 过滤与搜索快速定位目标请求》中，我们将深入讲解如何使用强大的过滤器快速定位目标请求，以及如何解读复杂的请求参数。如果你想更系统地学习网页数据抓包实战与JS逆向教程，欢迎关注林石工作室的系列教程，我们将带你从入门到精通。
思考题：你在实际抓包过程中遇到过哪些有趣的现象或难以解决的问题？欢迎在评论区分享你的经验！
