谷歌浏览器（Chrome）抓包主要依靠其强大的开发者工具，这是前端开发和调试的利器。根据您的需求场景，这里提供从基础到进阶的完整方案

使用内置开发者工具（最常用、最快捷）

这是最直接的方法,无需安装任何额外软件。

1. 打开开发者工具：

   • 快捷键：F12 或 Ctrl + Shift + I （Windows/Linux），Cmd + Option + I （Mac）。
   • 右键菜单：在网页上点击右键，选择“检查”。
   • 菜单栏：点击浏览器右上角三个点 → “更多工具” → “开发者工具”。

2. 切换到网络面板： 打开开发者工具后，点击顶部标签栏的“Network”（网络）面板。

3. 开始抓包：

   • 确保录制按钮是红色状态（通常是默认状态）。
   • 刷新页面或进行你需要的操作（如点击按钮、提交表单），所有网络请求都会在此面板中列出。

4. 核心功能与使用技巧：

   • 查看请求详情：点击任意一条请求，可以查看其Headers（请求头/响应头）、Preview（预览）、Response（响应体）、Cookies、Timing（耗时分析）等。
   • 筛选请求：
     • 类型：XHR/Fetch（主要看API请求）、JS、CSS、Img等。
     • 关键字：在筛选框输入URL部分内容。
   • 保留请求日志：勾选“Preserve log”（保留日志），防止页面跳转时清空记录。
   • 模拟弱网环境：点击“Online”下拉菜单，选择“Fast 3G”、“Slow 3G”等节流条件。
   • 复制请求为各种格式：右键点击请求 → “Copy” → 可以复制为cURL命令、Node.js fetch代码等，方便重现。
   • 阻止请求：右键请求 → “Block request URL”，可用于调试资源加载问题。
   • 查看WebSocket消息：在“Network”面板中筛选“WS”类型，点击后可在“Messages”子面板查看实时消息。

使用专业抓包工具（功能更强大）

当需要拦截并修改请求/响应、抓取非浏览器流量（如手机App）或进行更复杂的测试时，需要代理工具。

这类工具在您的电脑上建立一个代理服务器，让浏览器（或手机）的流量都经过它，从而实现全方位的抓取和修改。

推荐两款主流工具：

1. Fiddler Classic（Windows平台经典之选）

   • 特点：免费、功能极其强大，是Windows平台的标杆。
   • 核心功能：
     • 断点调试：可以拦截请求后暂停，修改请求参数或响应内容再放行。
     • 自动响应：用本地文件或自定义规则模拟服务器响应。
     • 解密HTTPS：安装其根证书后，可以解密并查看HTTPS请求的明文内容（需在Fiddler和客户端设备上信任证书）。
     • 抓取手机App流量：将手机Wi-Fi代理设置为电脑IP和Fiddler端口（默认8888）。

2. Charles（跨平台，macOS上更流行）

   • 特点：界面美观，跨平台（Windows/macOS/Linux），功能与Fiddler类似。
   • 核心功能：同样支持HTTPS解密、断点、重写、映射、弱网模拟等，其“Repeat”和“Compose”功能在测试接口时非常方便。

抓取移动端（手机/平板）流量

核心思想是让移动设备和电脑处于同一局域网,并将移动设备的网络代理设置为电脑上的抓包工具。

通用步骤（以Fiddler/Charles为例）：

1. 在电脑上启动Fiddler/Charles。
2. 在电脑和手机上连接同一个Wi-Fi。
3. 在抓包工具中开启“允许远程连接”选项。
4. 查询电脑的局域网IP地址（如 168.1.100）。
5. 在手机的Wi-Fi设置中，配置该网络的代理：手动，主机填电脑IP，端口填抓包工具的端口（Fiddler默认为8888，Charles默认为8888）。
6. 在手机浏览器访问 http://<电脑IP>:<端口> （如 http://192.168.1.100:8888），下载并安装抓包工具的根证书（这是解密HTTPS流量的关键）。
7. 配置完成后,手机上的所有网络请求都会显示在电脑的抓包工具中。

方案对比与选择建议

如何选择？

• 如果你是前端开发者，只想看看网页发出的请求、响应和状态：直接用 Chrome DevTools 的 Network 面板就够了。
• 如果你需要测试接口、修改请求/响应内容、模拟不同数据、或抓取手机App的流量：请使用 Fiddler 或 Charles。

重要提示（关于HTTPS解密）：
使用Fiddler/Charles解密HTTPS时，需要在设备上手动信任其安装的根证书，这会产生安全警告，仅应在调试环境中使用，完成后请移除代理设置和证书。

从 Chrome DevTools 开始尝试，它能解决大部分网页抓包需求，遇到更复杂场景时，再学习使用 Fiddler 或 Charles 这类专业工具。

标签： Chrome抓包 开发者工具