打开开发者工具，审查切到 Network 面板，元素刷新页面——一片空白。审查这不是元素故障，是审查你没勾选 Preserve log，或者页面压根没发请求。元素大多数人第一次找 Network 的审查时候，都以为它藏在某个设置菜单里，元素翻遍了 Chrome 的审查三点菜单和右键菜单，结果它就在 Elements 旁边，元素紧挨着 Console，审查只是元素名字叫 Network，中文版叫“网络”。审查
位置本身不复杂。元素Windows 上按 F12，审查Mac 上按 Cmd+Option+I，或者右键页面选“检查”，顶部标签栏从左往右数：Elements、Console、Sources、Network、Performance、Memory、Application、Security、Lighthouse。Network 排第四，图标是一个类似信号波的小图形。如果你用的是中文界面，它显示为“网络”。点一下，面板展开，上半部分是请求列表，下半部分是详情。就这么直接。
但知道位置和会用是两回事。我见过不少人打开 Network 后盯着空列表发愣，以为工具坏了。最常见的原因是：面板打开时页面已经加载完了，后续没有新请求。这时候按一下 F5 刷新，或者勾上“Preserve log”再操作页面，请求才会冒出来。另一个坑是过滤器。默认可能勾了“All”，但如果你之前手动点过“Fetch/XHR”，列表就只显示这类请求，其他 JS、CSS、图片全被藏起来了。我自己的习惯是每次打开先点一下“All”，再按“Doc”筛出主文档，确认页面结构。
请求列表里每一行都藏着信息。Name 列是文件名，Status 是 HTTP 状态码，200 是正常，304 是缓存，404 是找不到，500 是服务器炸了。Type 列区分 doc、stylesheet、script、xhr 等。Size 列显示实际传输大小，Time 列是耗时。点任意一行，右侧弹出详情面板，Headers 看请求头和响应头，Preview 看格式化后的响应内容，Response 看原始文本，Timing 看 DNS、TCP、TTFB 各阶段耗时。这些数据比任何日志都直接。
有个细节值得单独说：XHR 和 Fetch 请求。现代网页的数据几乎都靠它们异步加载。你在 Network 里筛出 XHR，刷新页面，会看到一堆接口调用。点开某个请求，看 Preview 里的 JSON 结构，就能知道后端返回了什么。我调试过一个列表不显示的 bug，最后发现是接口返回了 200，但 JSON 里 data 字段是 null。Network 面板里看得一清二楚，比在代码里 console.log 快得多。
移动端调试也绕不开 Network。Chrome 的远程调试连上手机后，DevTools 里同样有 Network 面板，只是请求列表刷新更快，因为手机页面通常更轻。Safari 的 Develop 菜单里也有类似功能，叫“网络”标签。Firefox 的开发者工具里叫“网络”，位置和 Chrome 差不多。Edge 直接沿用了 Chromium 那套，连快捷键都一样。
最后说一个容易忽略的点：Disable cache。勾上它，浏览器就不走缓存，每次请求都打到服务器。调试接口时必开，否则你改了半天后端代码，前端拿的还是旧数据。但调试静态资源时别开，不然图片、字体反复下载，列表刷得眼花。这个复选框在 Network 面板顶部，和 Preserve log 挨着。两个都勾上，基本就是调试标配了。
找 Network 不难，难的是看懂它。它不只是一个面板，是浏览器和服务器之间所有对话的录音。你点一下按钮，它记下发了什么、收了什么、花了多久、哪里卡住。下次页面出问题，别急着翻代码，先按 F12，点 Network，刷新。答案通常就在那里。