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

打开开发者工具

1. 快捷键方式：

   

   • F12（Windows/Linux）
   • Command + Option + I（Mac）
   • Ctrl + Shift + I（Windows/Linux）
   • Ctrl + Shift + C（快速进入检查模式）

2. 右键菜单：

   在页面上右键 → 选择“检查”

网络面板详解

进入开发者工具后,点击 Network 标签页：

主要功能区

1. 请求列表

   • 显示所有网络请求（HTML、CSS、JS、图片、API等）
   • Name、Status、Type、Initiator、Size、Time、Waterfall

2. 过滤选项

   • XHR/JS/CSS/Img/Media/Font/Doc：按类型过滤
   • 筛选框：输入关键词过滤请求
   • Disable cache：禁用缓存（模拟首次访问）
   • Online下拉菜单：模拟不同网络速度

3. 查看请求详情 点击任意请求，右侧显示详细信息：

关键标签页

• Headers：

  • General：请求方法、URL、状态码
  • Response Headers：服务器返回的头信息
  • Request Headers：发送的请求头

• Preview：格式化预览响应内容（JSON/图片等）

• Response：原始响应数据

• Cookies：请求携带的Cookie

• Timing：请求时间线（各阶段耗时）

实用技巧

监控特定请求

// 在Console中监控特定请求
monitorEvents(performance, 'resource')

复制请求信息

• 右键请求 → Copy → 可复制为：
  • Copy as cURL（调试用）
  • Copy response
  • Copy all as HAR

保存HAR文件

• 右键请求列表 → Save all as HAR
• 用于分享或后续分析

节流测试

• 选择 Online → 切换为 Slow 3G 或 Fast 3G
• 测试页面在不同网络下的表现

清空记录

• 点击红色圆形按钮清空当前记录
• Ctrl + L（Windows/Linux）
• Command + K（Mac）

高级功能

请求阻塞

• 右键请求 → Block request URL
• 测试资源加载失败时的表现

重放请求

• 右键请求 → Replay XHR（仅XHR请求）
• 测试接口调用

搜索功能

• Ctrl + F 搜索请求内容
• 可搜索URL、响应内容等

性能分析

• 勾选 Capture screenshots 录制页面加载过程
• 查看Waterfall图分析性能瓶颈

常见使用场景

1. 调试API：查看请求参数、响应数据
2. 分析性能：检查资源加载时间
3. 排查错误：查看失败请求的状态码
4. 安全测试：检查请求头、Cookie
5. 爬虫开发：分析网站请求结构

快捷键备忘

• Ctrl + R / Command + R：重新录制（刷新页面）
• Esc：显示/隐藏控制台面板
• Ctrl + Shift + P：打开命令菜单

通过以上功能,你可以全面分析和调试网页的网络请求，对于前后端开发和性能优化非常有帮助！

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