谷歌浏览器（Google Chrome）提供了非常强大的内置开发者工具，可以轻松完成网页抓包（即拦截、查看和分析网络请求）以下是几种主要方法，从简单到高级排列

使用内置开发者工具（最常用、最直接）

这是最核心和推荐的方法,无需安装任何额外软件。

1. 打开开发者工具

   • 快捷键：在任何网页上，按 F12 或 Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac)。
   • 右键菜单：在网页空白处点击右键，选择 “检查”。
   • 菜单栏：点击浏览器右上角的三个点 -> 更多工具 -> 开发者工具。

2. 切换到 Network（网络）面板

   • 在打开的开发者工具窗口中，顶部有一排标签页，点击 “Network”。

3. 开始抓包

   • 此时面板可能是空的。刷新当前网页 或 进行页面操作（如点击按钮、提交表单），所有发生的网络请求（HTML、CSS、JS、图片、API接口等）都会实时显示在列表中。
   • 重要：确保左上角的 圆形录制按钮 是红色的（表示正在记录）。

4. 查看请求详情

   • 点击任意一个请求，右侧会显示该请求的详细信息：
     • Headers：请求头和响应头，这是最重要的部分，包含URL、方法（GET/POST）、状态码、Cookie、User-Agent、参数等。
     • Preview：响应的预览（如JSON数据会被格式化展示）。
     • Response：原始的响应数据。
     • Timing：请求各个阶段的时间消耗,用于性能分析。
     • Payload：查看 POST 请求提交的表单数据或请求体。

5. 过滤和搜索

   • 顶部有筛选栏，可以按请求类型（XHR/JS/Img等）、域名进行过滤。
   • 使用 Ctrl+F 可以搜索请求中的关键词。

6. 保持请求日志

   • 默认情况下，切换页面或刷新后，之前的请求记录会被清空，可以勾选 “Preserve log” 来保留日志。

7. 导出请求数据

   • 在请求列表区域右键，可以 “Save all as HAR with content”，HAR文件是标准格式，可以分享给他人或用其他工具（如Fiddler, Charles）打开分析。

使用无痕模式/隐身模式

当你想排除浏览器扩展插件干扰时（有些插件会修改请求）,可以在无痕模式下使用开发者工具。

• 打开方式：Ctrl+Shift+N (Windows/Linux) / Cmd+Shift+N (Mac)。
• 然后在无痕窗口中再按 F12 打开开发者工具进行抓包。

使用移动设备调试（抓包手机浏览器的请求）

如果你想抓取手机通过Chrome浏览器访问网页时的请求：

1. 用USB线连接手机和电脑，在手机上开启USB调试模式（开发者选项）。
2. 在电脑Chrome中访问：chrome://inspect/#devices。
3. 确保“Discover USB devices”已开启,你应该能看到连接的手机。
4. 在手机上用Chrome浏览网页，电脑上会显示已打开的页面，点击 “inspect”，就会打开一个针对手机页面的开发者工具窗口，其Network面板中抓取的就是手机端的网络请求。

配合专业代理工具（功能更强大）

对于更复杂的需求，如修改请求/响应、断点调试、模拟弱网、抓取非浏览器应用（如手机APP）的请求，需要使用专业代理工具,Chrome浏览器可以很方便地配置代理。

1. 安装代理工具（任选其一）：

   • Fiddler Classic (Windows/macOS/Linux,免费且功能强大)
   • Charles (跨平台,收费但体验优秀)
   • mitmproxy (命令行工具,适合高级用户)

2. 配置流程：

   • 启动代理工具（如Fiddler）。
   • 在Chrome中，可以安装代理工具的浏览器扩展来方便切换，或者直接在系统网络设置中配置代理为 0.0.1:8888（Fiddler默认端口）。
   • 之后，Chrome的所有流量都会经过代理工具，你可以在代理工具中查看、分析、修改所有HTTP/HTTPS请求。
   • 抓取HTTPS请求：需要在代理工具中安装其根证书到系统或浏览器，并启用HTTPS解密功能,工具会有明确指引。

总结与选择建议

对于绝大多数前端开发和基础抓包需求，熟练掌握 Chrome DevTools 的 Network 面板就完全足够了。 它是你解决问题的第一把利器。