在谷歌浏览器中查看网络请求是前端开发、调试和性能分析的必备技能。主要通过 开发者工具（DevTools）中的 Network（网络）面板来实现

打开 Network 面板

1. 快捷键（最快的方式）：
   • Windows/Linux： F12 或 Ctrl + Shift + I
   • Mac： Command + Option + I
2. 右键菜单： 在网页任意位置点击鼠标右键，选择 “检查”。
3. 浏览器菜单： 点击浏览器右上角的三个点 → 更多工具 → 开发者工具。

打开开发者工具后，切换到顶部的 “Network” 标签页。

Network 面板核心区域详解

打开后，刷新页面或进行交互，即可看到所有网络请求,面板主要分为以下几个区域：

控制栏（顶部工具栏）

• 记录开关 ：圆形按钮，红色表示正在记录,灰色表示已暂停。
• 清除按钮 ：清空当前请求列表。
• 筛选过滤 ：
  • 筛选框 ：输入关键词（如 domain:api.example.com、.js）过滤请求。
  • 类型筛选按钮 ：快速筛选 XHR/JS/CSS/Img/Media/Font/Doc 等类型。
• 禁用缓存 ：勾选后，浏览器将不会使用本地缓存，所有请求都向服务器获取（开发时非常有用）。
• 在线模式 ：可以模拟不同的网络环境（如 3G、4G、离线）,测试弱网性能。

请求列表（表格主体）

列表的表头可以自定义,常用列有：

• Name： 请求的资源名称/URL。
• Status： HTTP 状态码（如 200成功、404未找到、500服务器错误）。
• Type： 请求类型（如 XHR、Fetch、Document、Script 等）。
• Initiator： 发起该请求的来源（哪个文件或脚本发起的）。
• Size： 资源大小（显示从服务器下载的大小，括号内为解压后大小）。
• Time： 请求总耗时。
• Waterfall： 重要！ 可视化请求各阶段耗时（排队、DNS、连接、SSL、发送、等待、接收）。

详情面板（点击某个请求后显示）

包含多个标签页,是分析请求的核心：

• Headers（头部信息）：
  • General： 请求方法（GET/POST）、URL、状态码。
  • Response Headers： 服务器返回的HTTP头。
  • Request Headers： 浏览器发送的HTTP头。
  • Query String Parameters： GET请求的URL参数。
  • Form Data / Request Payload： POST/PUT请求的提交数据。
• Preview（预览）： 对JSON、图片、HTML等响应内容进行格式化预览。
• Response（响应）： 原始的响应体文本。
• Initiatior & Timing（发起者与时间）：
  • Initiator： 调用栈,精确显示是哪个JS文件的哪一行代码发起了这个请求。
  • Timing： 比瀑布图更详细的时间阶段拆分。

不同场景下的使用技巧

场景1： 分析页面加载性能

1. 打开Network面板,确保禁用缓存已勾选。
2. 刷新页面,查看所有请求。
3. 关注点：
   • 请求总数和总大小。
   • 瀑布图：看是否有请求阻塞,哪些请求耗时最长。
   • DOMContentLoaded 和 Load 事件的时间线。

场景2： 调试 API 接口（Ajax/Fetch）

1. 在筛选框中输入 XHR 或 Fetch,只查看异步请求。
2. 进行网页操作（如点击按钮）,触发API调用。
3. 点击对应的请求，查看：
   • Headers：确认请求方法、URL、携带的Token或Cookie是否正确。
   • Request Payload：检查发送的数据格式（JSON/FormData）。
   • Preview/Response：查看服务器返回的数据是否正确。
   • Status：确认状态码。

场景3： 查找特定资源或问题

• 过滤：在筛选框直接输入文件名（如 main.css）或域名。
• 按状态码过滤：在筛选框输入 status-code:404 可以找到所有失败的请求。
• 按大小排序：点击 Size 列标题,找出过大的资源。

场景4： 捕获页面跳转或表单提交的请求

1. 在打开Network面板的情况下，勾选 “Preserve log”（保留日志），这样页面跳转时,记录不会清空。
2. 勾选 “Disable cache”。
3. 执行页面跳转或表单提交操作。

场景5： 复制请求信息（用于分享或重新测试）

在请求列表的请求上 右键,你可以：

• Copy as cURL： 最强大！ 将请求复制为cURL命令，可直接在命令行重发,或在Postman中导入。
• Copy link address： 复制URL。
• Copy response： 复制服务器返回的数据。

高级技巧与提示

• 节流（Throttling）： 在“在线模式”中选择“Fast 3G”等，模拟移动端慢速网络,测试加载表现。
• 查看WebSocket连接： 筛选 WS 类型,可以查看WebSocket的握手过程和消息帧。
• 查看GraphQL请求： GraphQL请求通常也是XHR类型，在 Payload 标签页查看 query 和 variables。
• 隐藏数据URL： 筛选 -data: 可以隐藏内联的Base64图片等。

记住核心流程：打开工具 → 开始记录 → 触发请求 → 分析列表/详情。 熟练使用Network面板能极大地提升你排查网页问题的效率。

标签： 网络请求 Network面板