Network面板为空最常见原因是未在录制状态下刷新，需确认左上角为红色实心圆点（Recording状态），并按Ctrl+R/F5刷新而非点击跳转；若先开页面再开DevTools，初始资源请求将丢失。
Network 面板不是 HTML 写出来的，你无法用 <div> 或 <script> “实现”它；它由浏览器原生提供，只能通过 DevTools 操作触发和查看真实请求数据。
为什么刷新后 Network 面板还是空的
最常见原因是没在录制状态下刷新——Network 面板默认开启录制，但容易被误点停用。另外，先打开页面再开 DevTools 会导致初始 HTML、CSS、JS 请求丢失。
- 按
F12或Cmd+Option+I（Mac）打开 DevTools，确保 Network 面板已激活 - 确认左上角是红色实心圆点（
Recording状态），不是灰色空心圆 - 必须按
Cmd+R/Ctrl+R或地址栏回车刷新，不能靠点击链接跳转 - 如果仍为空，检查是否勾选了
Preserve log却忘了清空旧记录，或误启了Disable cache导致某些资源被跳过（极少见）
怎样快速定位慢请求或失败接口
靠滚动找效率极低。Network 面板的 filter 输入框支持组合条件，本质是「且」关系，空格分隔多个规则。
- 查登录接口：
/api/login或login（子串匹配） - 只看报错：
status-code:4xx或status-code:5xx - 聚焦 JSON 响应：
mime-type:application/json - 找大文件：
larger-than:100k（注意单位是k，不是KB） - 同时满足 POST + JSON：
method:POST mime-type:application/json
Disable cache 和 Preserve log 为什么必须开
不开 Disable cache，浏览器可能返回 200 (from memory cache)，你看不到真实服务端响应；不开 Preserve log，页面跳转后所有记录清空，SPA 路由切换、登录重定向等场景根本没法追踪。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
Disable cache在后台标签页中可能不生效，务必在当前活跃页操作 -
Preserve log开启后，即使跨多个路由或页面跳转，Network 记录仍保留，但会累积变卡，调试完记得手动清空 - 两者都开是排查接口逻辑、缓存策略、重定向链路的底线配置，不是“可选优化”
怎么看 TTFB 和资源加载瓶颈
TTFB（Time to First Byte）反映后端响应速度，在 Network 面板每条请求的时间轴里，灰色段落就是 TTFB —— 从发起请求到收到第一个字节之间的时间。它长，问题大概率不在前端。
- 时间轴中蓝色（Blocking）长：DNS 查询或连接排队，可能受并发限制或网络质量影响
- 红色（Stalled）长：常因队列等待、代理延迟或证书验证慢
- 绿色（Content Download）长：资源本身大，或带宽受限，也可能是服务端流式响应慢
- 点击某请求 → Headers 标签页 → 查
Response Headers中的Cache-Control，判断是否命中缓存；若没命中却耗时短，说明服务端处理快；若耗时长且没缓存，就该看后端日志了
真正容易被忽略的是：Network 面板显示的“完成时间”只是浏览器接收完响应的时间，不包括 DOM 解析、JS 执行、渲染合成等后续阶段。如果你看到某个 JS 加载很快但页面卡顿，问题一定在后面——这时候该切到 Performance 面板看火焰图，而不是继续刷 Network。
