在谷歌浏览器中查看网络请求，可以通过开发者工具来实现。以下是详细步骤

打开开发者工具

方法1：快捷键

• Windows/Linux: F12 或 Ctrl + Shift + I
• Mac: Command + Option + I

方法2：右键菜单

• 在网页任意位置右键 → 检查 (Inspect)

方法3：菜单栏

• 点击浏览器右上角三个点 → 更多工具 → 开发者工具

使用 Network 面板

1. 切换到 Network 标签页

   

   • 打开开发者工具后，点击顶部标签栏的 Network

2. 查看网络请求

   • 列表区域: 显示所有网络请求
   • 表头信息:
     • Name: 请求名称
     • Status: 状态码（200、404等）
     • Type: 请求类型（XHR、JS、CSS等）
     • Initiator: 发起源
     • Size: 资源大小
     • Time: 加载时间

3. 常用功能按钮

   • 🚫 清除记录: 清空当前列表
   • 🔄 保留日志 (Preserve log): 页面跳转时保留请求记录
   • 📴 禁用缓存 (Disable cache): 调试时忽略缓存
   • ⚡ 在线/离线模拟
   • 🌐 节流 (Throttling): 模拟慢速网络

查看请求详情

点击任意请求,查看详细信息：

Headers 标签

• General: 请求方法、状态码、URL
• Request Headers: 请求头信息
• Response Headers: 响应头信息

Preview 标签

• 格式化显示响应内容（JSON、HTML等）

Response 标签

• 原始响应数据

Cookies 标签

• 请求携带的 Cookie

Timing 标签

• 请求时间线，分析性能瓶颈

筛选和过滤

筛选请求类型

• XHR/Fetch: AJAX请求
• JS: JavaScript文件
• CSS: 样式文件
• Img: 图片
• Media: 音视频
• Font: 字体文件
• Doc: 文档
• WS: WebSocket

过滤特定请求

• 输入框输入关键词过滤
• 使用正则表达式：/api/
• 状态码过滤：status-code:200
• 域名过滤：domain:example.com

高级技巧

复制请求信息

• 右键请求 → Copy →
  • Copy link address
  • Copy as cURL
  • Copy as fetch
  • Copy all as HAR

查看 WebSocket 消息

• 筛选 WS 类型
• 点击 WebSocket 请求
• 查看 Messages

// 在 Console 标签中直接查看请求
console.table(performance.getEntriesByType("resource"))