在谷歌浏览器中查看网络请求，最常用的是使用开发者工具的 Network（网络）面板。以下是详细步骤

打开开发者工具

• 快捷键：按 F12 或 Ctrl + Shift + I（Windows/Linux），Cmd + Option + I（Mac）
• 右键菜单：在网页空白处右键 → 点击“检查”（Inspect）
• 菜单栏：点击浏览器右上角菜单（三个点）→ 更多工具 → 开发者工具

进入 Network 面板

• 打开开发者工具后,点击顶部标签栏的 "Network"
• 如果没有看到标签栏,可能需要点击 >> 图标展开

基本操作

• 开始/停止记录：左上角圆形按钮（红色为记录中，灰色为停止）
• 清空记录：点击垃圾桶图标
• 保持日志：勾选 "Preserve log" 可保留页面跳转时的请求
• 模拟离线：勾选 "Offline" 测试离线状态

筛选请求类型

在筛选栏可以按类型筛选：

• XHR：AJAX 请求（最常用）
• JS / CSS / Img：脚本、样式、图片
• Media：音视频文件
• Doc：HTML 文档
• All：显示所有

查看请求详情

点击任意请求,会显示多个面板：

• Headers：请求头、响应头、状态码、请求方法
• Payload：请求参数（Query Parameters / Form Data）
• Response：服务器返回的数据（JSON/HTML等）
• Timing：请求各阶段耗时分析

实用技巧

• 搜索请求：Ctrl + F 在请求列表中搜索
• 复制请求：右键请求 → Copy → 可复制为 cURL、Fetch 等格式
• 阻塞请求：右键请求 → Block request domain（测试资源加载失败情况）
• 模拟慢速网络：在 "Throttling" 下拉框选择 3G 等模拟慢速网络

高级功能

• 重新发送请求：右键请求 → "Replay XHR"
• 修改并重发：右键 → "Edit and Resend"（可修改参数后重新发送）
• 导出HAR文件：右键任意处 → "Save all as HAR"（用于分享或分析）

控制台查看请求

也可以直接在 Console 面板使用：

   // 监听所有网络请求
   monitor(Network) // 或使用第三方工具库

常见用途

• 调试 API 接口：查看请求参数和响应数据
• 分析性能：通过 Timing 面板优化加载速度
• 排查错误：检查 4xx/5xx 状态码的请求
• 学习网页技术：查看其他网站的网络请求结构

小提示：打开开发者工具后刷新页面（F5），可以看到页面加载时的所有网络请求。