前端网络排障必学：用 Network 面板看清每一次请求

开发这几年我养成了一个习惯：遇到网页出问题，先不急着改代码，先把 F12 打开，切到 Network 面板看一遍。很多前端同事觉得 Network 面板只是"看请求通没通"用的，其实不是这样——它真正厉害的地方，是能把浏览器和服务器之间那些看不见的交互，变成一条条可追溯的记录。你看到的每条请求、每个状态码、每段瀑布时间，都是破案的线索。这一期是 Ep.02，标题叫"侦察兵的艺术"，想聊的就是：怎么把 Network 面板当成你手里那副望远镜，从那些平常没人注意的请求细节里，看清网站背后到底发生了什么。

不管你是做 Vue、React 还是原生页面，不管你遇到的是接口 404、媒体文件加载不出来、WebSocket 反复重连，还是别人嘴里说的"网络不可用"，只要你愿意把 Network 面板拆开看，大多数问题都能在五分钟内收敛到明确的方向。这篇文章会按我的实际排障经验，从面板基本操作讲到时间线指标，再用几个真实场景把完整排查链路走一遍。看完之后，你对"网络问题"的判断会变得很具体。

1. 为什么说 Network 面板是前端的第一侦察工具

1.1 它其实一直在记录，只是你没注意

很多人第一次打开 Network 面板，是因为后端同事说"你调一下接口看看吧"。但其实 Network 面板默认就在后台记录浏览器发出的所有网络活动，并不是一定要手动开启才能用。你在页面里点击、滚动、刷新、上传文件、切换路由，只要有请求发生，记录区就会实时滚出新的行。

打开方式不用多说了：浏览器里按 F12，或者右键页面选"检查"，然后顶部找到 "Network" 标签页。Windows 上也可以用 Ctrl+Shift+I，Mac 上用 Option+Command+I，都很快。要提醒的一点是，如果你一直开着 DevTools，但又切到别的标签页操作了很久，回来时记录可能已经清空了——因为 Network 面板默认是"导航即清空"的逻辑。真正需要长时间观察时，记得把面板左上角的 "Preserve log" 勾上，页面跳转后旧记录还会保留，这对排查登录跳转、302 循环、单页应用路由切换这类问题特别有用。

还有一个容易被忽略的开关：面板顶部那个红色圆点。它代表"正在录制网络日志"。如果你不小心点了它，记录会暂停；如果页面有异常但 Network 里一片空白，先检查红点是不是灰了。这听起来很基础，但我真的见过同事排查半天，最后发现是误触了录制开关。

1.2 默认表格里每个字段都是一条线索

Network 面板默认展示的是请求列表，每一行代表一次完整的网络请求。默认列有 Name、Status、Type、Initiator、Size、Time 和 Waterfall，很多人的使用习惯就是只看这几列，能查出来的东西十分有限。

我给你一个很实际的建议：在列表的表头任意位置右键，勾选出更多列，至少把 Domain（域名）、Remote Address（远程地址）、Protocol（协议版本）、Connection ID（连接编号） 打开。为什么这几列有用？因为你在做移动端联调、本地开发、线上环境对比的时候，最常遇到的情况是"明明同一个接口，在不同环境表现不一样"。Domain 列能告诉你请求最终打到了哪个域名，Remote Address 列能告诉你这个域名被解析到了哪个 IP，Protocol 列能看出资源走的是 HTTP/1.1 还是 h2（HTTP/2）。有时候页面加载慢，看一眼 Protocol 会发现大量请求都挤在 HTTP/1.1 的 6 条连接里排队，这比单纯看某个请求的耗时更接近根因。

列表默认按发生时间排序。请求名的显示规则是资源 URL 的最后一段。如果有人跟你说"Network 面板怎么看不到 xxx 接口"，先別急着怀疑代码，直接在顶部过滤框里输入接口关键字就够了。过滤框是 Network 面板最常用的入口，别只在列表里肉眼滚动。

1.3 它更适合回答哪些问题

我总结过 Network 面板最适合回答的四类问题：

1. 这个请求到底有没有发出去。 如果 Network 里根本没有请求记录，说明问题大概率出在代码逻辑、触发时机、路由守卫这类前端环节；不用先去冤枉后端。
2. 请求发出后发生了什么。 状态码 200、304、404、500，分别对应完全不同的处理路径；状态码前的 (canceled)、(failed)、(blocked:...) 也有各自的含义。
3. 请求慢在哪一段。 是域名解析慢，是 TCP/TLS 连接慢，还是服务器迟迟不返回第一个字节？这就是瀑布图要回答的问题。
4. 浏览器到底用了缓存还是真的走了网络。 Size 列里的 (from disk cache)、(from memory cache)、(from service worker)，就是这条请求的最终来源。

当你心里装着这四个问题再去看 Network 面板，它就不再是"一个看接口响应的窗口"，而是一个帮你缩小排查范围的侦察工具。

2. 一次完整侦察：从请求列表到响应体

2.1 先学会从列表快速锁定目标

排查问题第一步是找到目标请求。Network 面板顶部有个输入框，你