在谷歌浏览器（Chrome）中查看网络请求，主要通过 开发者工具（DevTools）实现。以下是详细步骤

使用快捷键（最快捷）

1. 打开需要调试的网页。
2. Windows/Linux：按 F12 或 Ctrl + Shift + I。
3. Mac：按 Cmd + Option + I。
4. 在开发者工具中,切换到 Network（网络） 标签页。

右键菜单

1. 在网页任意位置右键点击,选择 检查（Inspect）。
2. 在打开的开发者工具中,点击 Network 标签页。

通过浏览器菜单

1. 点击浏览器右上角的 三个点（自定义及控制菜单）。
2. 选择 更多工具 → 开发者工具。
3. 切换到 Network 标签页。

Network 面板使用详解

打开 Network 面板后，可按以下步骤操作：

开始记录请求

• 默认打开时即开始记录（录制按钮为红色）。
• 若已暂停,点击顶部灰色圆圈按钮（⏺️）开启记录。

捕获请求并分析

• 刷新页面 或进行页面操作（如点击按钮）以捕获请求。
• 请求列表显示：
  • 请求名称（Name）：资源文件名或接口地址。
  • 状态（Status）：HTTP 状态码（如 200、404）。
  • 类型（Type）：请求类型（XHR、JS、CSS 等）。
  • 发起者（Initiator）：触发请求的来源。
  • 大小（Size）：资源大小。
  • 时间（Time）：加载耗时。

查看请求详情

点击任意请求,查看右侧面板：

• Headers（请求头）：查看请求 URL、方法、状态码、请求头和响应头。
• Preview（预览）：格式化显示 JSON、图片等响应内容。
• Response（响应）：原始响应数据。
• Timing（时间统计）：请求各阶段耗时分析。

过滤请求

• 顶部筛选栏可过滤请求类型（XHR、JS、Img 等）。
• 输入关键词（如 api）筛选特定请求。

其他实用功能

• 保留日志（Preserve log）：勾选后，页面跳转时保留请求记录。
• 停用缓存（Disable cache）：模拟首次加载。
• 在线速度模拟（Online）：可切换为 3G 等慢速网络测试。

高级技巧

• 复制请求信息：右键请求 → Copy → 可复制为 cURL、Fetch 等格式。
• HAR 文件导出：右键请求列表 → Save all as HAR with content（用于分享或备份）。
• XHR 断点：在 Sources 面板可对特定 XHR 请求设置断点。

移动端调试

1. 使用 USB 连接手机 或通过 远程调试（Android）。
2. 在 Chrome 中打开 chrome://inspect，选择设备及页面进行调试。

掌握以上方法,即可高效分析网页加载性能、调试 API 接口及排查网络问题。

标签： 网络请求 开发者工具