network面板为空最常见原因是未在录制状态下刷新，需确认左上角为红色实心圆点（recording状态），并按ctrl+r/f5刷新而非点击跳转；若先开页面再开devtools，初始资源请求将丢失。

Network 面板不是 HTML 写出来的，你无法用 <div> 或 <code><script></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。