控制台使用技巧1

方法一：Network 面板查看请求状态

1. 打开开发者工具（F12）
2. 切换到 Network 标签
3. 观察请求状态：
   • 红色：请求失败
   • 黄色：请求被阻塞/等待
   • 灰色：请求被取消
   • 绿色：请求成功

方法二：查看请求的 Timing 信息

1. 在 Network 面板中点击具体请求
2. 查看 Timing 标签页，关注：
   • Queueing：排队时间（过长可能被其他请求阻塞）
   • Stalled：等待时间（可能被浏览器限制或阻塞）
   • Waiting (TTFB)：等待服务器响应时间（网络慢或服务器慢）
   • Content Download：下载时间

方法三：识别阻塞请求

1. 在 Network 面板中：

   • 按 Status 排序，查看是否有长时间处于 pending 的请求
   • 按 Time 排序，找出耗时最长的请求
   • 查看 Waterfall 视图，看请求是否在排队

2. 判断阻塞的特征：

   • 多个请求同时处于 pending
   • 请求的 Queueing 时间很长
   • 请求的 Stalled 时间很长

方法四：查看浏览器连接限制

1. 在 Network 面板底部查看连接信息
2. Chrome 对同一域名有连接数限制（通常 6 个）
3. 如果超过限制，后续请求会排队等待

方法五：使用 Performance 面板

1. 切换到 Performance 标签
2. 点击录制按钮
3. 执行操作后停止录制
4. 查看主线程活动：
   • 红色长条：长时间任务（可能阻塞）
   • 查看是否有 JavaScript 执行阻塞了网络请求

快速判断方法

• 网络慢的特征：

  • 请求的 Waiting (TTFB) 时间很长
  • 所有请求都慢，但都在正常进行
  • 没有请求处于长时间 pending

• 被阻塞的特征：

  • 多个请求同时处于 pending
  • 请求的 Queueing 或 Stalled 时间很长
  • 某些请求完成后，后续请求才开始

实用技巧

1. 使用过滤器：

   • 在 Network 面板的过滤框中输入 is:running 查看正在进行的请求
   • 输入 status-code:0 查看失败的请求

2. 查看请求详情：

   • 右键点击请求 → Copy → Copy as cURL，可查看完整请求信息

3. 监控网络活动：

   • 在 Network 面板中勾选 "Preserve log" 保留日志
   • 勾选 "Disable cache" 排除缓存影响

通过这些方法，可以快速判断是网络慢还是请求被阻塞。