在谷歌浏览器中查看网络请求，可通过 开发者工具（DevTools）实现。以下是详细步骤和功能说明

快速打开开发者工具

1. 快捷键（推荐）：
   • Windows/Linux：按 F12 或 Ctrl + Shift + I
   • Mac：按 Cmd + Option + I
2. 右键菜单：在网页任意位置右键 → 选择 “检查”（Inspect）。

查看网络请求详细步骤

1. 打开开发者工具后，切换到 “Network”（网络） 选项卡。
2. 刷新页面（按 F5 或 Cmd/Ctrl + R）或触发页面操作（如点击按钮）,开始捕获请求。
3. 网络面板功能详解：
   • 请求列表：显示所有请求（按时间排序）。
   • 筛选：可按请求类型筛选（XHR/JS/CSS/Img 等）。
   • 搜索：按 Ctrl + F（Mac: Cmd + F）搜索关键词。
   • 保留日志：勾选 “Preserve log” 防止页面跳转时清空请求。
   • 禁用缓存：勾选 “Disable cache” 避免缓存干扰。

查看单个请求详情

点击任意请求,右侧面板显示：

• Headers：请求头、响应头、状态码、请求方法等。
• Preview：格式化预览响应内容（如 JSON/HTML）。
• Response：原始响应数据。
• Timing：请求时间轴,分析性能瓶颈。

高级技巧

1. 复制请求数据：
   • 右键请求 → “Copy” → 可复制为 cURL、Fetch 等格式。
2. 监控特定请求：
   • 在筛选框输入关键字（如 api）过滤。
3. 节流（Throttling）：

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

4. 导出/导入请求数据：
   • 右键请求列表 → “Save all as HAR” 导出。

常见用途

• 调试 API 接口：查看请求参数和响应结果。
• 分析页面性能：检查资源加载时间、大小。
• 排查错误：观察失败请求（红色状态码）的原因。

通过以上步骤，你可以充分利用 Chrome 开发者工具分析网络请求，如有特殊需求（如拦截请求），还可使用扩展程序（如 Charles 或浏览器内置的 “Network conditions” 面板）。