在谷歌浏览器（Google Chrome）中查看网络请求，主要通过 开发者工具（Developer Tools）中的 网络（Network）面板来实现。以下是详细步骤和功能介绍

打开开发者工具

1. 快捷键（推荐）：
   • Windows/Linux：按 F12 或 Ctrl + Shift + I
   • Mac：按 Cmd + Option + I
2. 右键菜单：
   • 在网页任意位置右键点击,选择 检查（Inspect）。
3. 菜单栏：
   • 点击浏览器右上角的 ⋮（菜单） → 更多工具 → 开发者工具。

使用网络面板

1. 打开开发者工具后,切换到 Network（网络） 选项卡。
2. 刷新页面（按 F5 或 Cmd/Ctrl + R）以捕获网络请求（或直接在页面进行操作，如点击按钮触发请求）。

网络面板功能详解

请求列表

• 显示所有请求（按时间顺序），包括：
  • 类型：XHR/Fetch（API请求）、JS、CSS、图片、字体等。
  • 状态：HTTP状态码（如200、404）。
  • 大小/时间：资源大小和加载耗时。

筛选请求

• 点击上方的筛选按钮（如 XHR、JS、Img）可只看特定类型。
• 在 Filter（筛选框） 输入关键词（如域名、文件名）。

查看请求详情

点击任意请求,右侧会显示详细信息：

• Headers（请求头/响应头）：
  • 请求方法（GET/POST等）、URL、状态码。
  • 请求头、响应头、查询参数等。
• Preview（预览）：

  格式化显示API返回的JSON数据或图片预览。

• Response（响应内容）：

  原始响应数据。

• Timing（时间分析）：

  请求各阶段耗时（DNS查询、TCP连接、SSL握手等）。

常用操作

• 保留日志（Preserve log）：

  勾选后,页面跳转时不会清空请求记录。

• 停用缓存（Disable cache）：

  勾选后,所有请求会忽略缓存（模拟首次访问）。

• 节流（Throttling）：

  模拟慢速网络（如3G）测试加载性能。

• 导出请求：
  • 右键请求列表 → Save all as HAR（可导入到性能分析工具）。

实用场景示例

1. 调试API接口：
   • 筛选 XHR/Fetch，查看请求参数和响应数据。
2. 分析页面性能：

   关注请求耗时、资源大小，找出加载瓶颈。

3. 检查资源问题：

   查找失败请求（红色状态码）或未加载的资源。

4. 模拟移动端：
   • 点击 设备图标（Toggle Device Toolbar），测试移动网络下的请求。

常用快捷键

• Ctrl + R（Win）/ Cmd + R（Mac）：记录请求（刷新页面）。
• Ctrl + F（Win）/ Cmd + F（Mac）：在请求列表中搜索。
• Esc：快速打开/关闭开发者工具抽屉面板。

注意事项

• 网络面板仅记录当前标签页的请求。
• 隐私模式或关闭标签页后,记录会被清空。
• 敏感信息（如Authorization头）可能暴露，调试后请关闭开发者工具。

掌握这些操作,你可以轻松监控、分析和调试网页的网络活动！

标签： 网络请求 网络面板