打开network面板前必须确认三件事：devtools已打开、network标签页被选中、左上角录制按钮为红色；否则无法捕获请求。

打开 Network 面板前必须确认的三件事

Chrome DevTools 的 Network 面板不会自动捕获所有请求——它只记录面板处于「开启且未暂停」状态时发生的网络活动。很多人以为刷新页面就一定能看到全部请求，结果发现 XHR 或 fetch 调用不见了，其实是因为面板没在监听状态。

务必检查以下三点：

• DevTools 是否已打开（不是仅靠右键“检查”但没点开）
• Network 标签页是否被选中（顶部标签高亮）
• 左上角的「录制」按钮（●）是否为红色（红色 = 正在录制；灰色 = 已暂停）

快捷键 Ctrl+E（Windows/Linux）或 Cmd+E（macOS）可随时切换录制状态，比点按钮更快。

过滤特定请求：按类型、域名、状态码快速定位

一个典型页面可能发出 50+ 请求，全靠滚动找效率极低。直接用 Network 面板顶部的过滤框，输入关键词就能筛出目标请求：

• 输入 XHR 或 fetch，只显示脚本发起的 API 请求
• 输入 js 或 css，聚焦资源加载类请求
• 输入 status-code:404 或 domain:api.example.com，支持字段语法（官方文档称其为 “Filter expressions”）
• 点击表头如 Size 或 Time 可排序，快速发现大体积响应或慢请求

注意：过滤是实时的，但不会影响已记录的请求条目——只要没清空日志，筛选后切回 All 还能恢复查看。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

点击请求后重点看哪几块内容

单击某一行请求，在右侧打开的详情页里，真正影响调试效率的是这四个标签页：

• Headers：确认 Request Method 是 GET 还是 POST；检查 Referer、Authorization 等关键 header 是否携带；留意 Content-Type 是否匹配预期
• Preview 和 Response：前者是格式化后的响应体（适合 JSON/XML），后者是原始字节流（适合二进制或编码异常时对照）
• Timing：展开后能看到各阶段耗时（blocked、dns、connect、wait、receive）。如果 wait 时间远高于其他项，大概率是服务端处理慢，而非网络问题
• Initiator：显示谁触发了该请求（例如 script.js:123 或 Other），对排查第三方 SDK 自动发请求特别有用

别忽略右上角的「Copy」按钮组——Copy as cURL 可直接复现请求，Copy request headers 能快速比对前后端 header 差异。

导出 HAR 文件用于离线分析或协作复现

截图或口头描述请求细节容易遗漏关键信息，而 HAR（HTTP Archive）文件是标准 JSON，包含完整时间戳、headers、body、timings，开发、测试、后端都能用同一份数据对齐问题。

导出操作很简单：

• 确保 Network 面板正在录制（红色圆点）并完成一次完整操作（如登录+加载列表）
• 右键请求列表空白处 → Save all as HAR with Content（勾选 with Content 才包含响应体）
• 文件保存后，可用在线工具如 HAR Viewer 直观浏览，或用 Python 的 haralyzer 库做自动化分析

容易被忽略的一点：Save all as HAR 不会包含已禁用的请求（比如你手动禁用了某个 JS 文件的加载），所以导出前请确认所有目标请求都成功出现在列表中且状态码非 cancelled。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！