Chrome Network 面板资源过滤收缩解决方法

现象

解决方法

点击如图设置按钮

如图点击左侧的 experiments 在 Filter 输入 red，取消勾选 redesign 这一项

改完之后 DevTools 会提示需要重新加载，点提示里的 Reload DevTools，或者关掉 DevTools 再打开（F12 两次）。这个改动只影响 DevTools 自身的界面，不影响页面。

为什么会突然变样

DevTools 有一套 Experiments 机制，用来灰度新的界面和功能。Chrome 团队会在某个版本里把某个 experiment 默认打开，先给一部分用户试，收集反馈再决定要不要正式发布。所以你会遇到「昨天还是老样子，今天更新完 Chrome 就变了」，且同事的机器上可能还是老界面——这不是配置不一致，是灰度分组不同。

正文遇到的是 Network 面板的过滤器重设计：原来是一排横向排列的类型按钮（All / Fetch/XHR / JS / CSS / Img / Media / Font / Doc / WS / Wasm / Manifest / Other），改版后收进了一个下拉菜单，得点开才能选。改版的动机大概是在窄窗口下省空间，但对习惯了一键切换的人来说多了一次点击。

experiments 页面里那些选项的性质要清楚：它们是实验性的、随时可能被移除或改名。所以一个 experiment 关掉之后不一定永久有效——Chrome 大版本更新时，如果这个特性从 experiment 转正成了默认行为，那个开关就会从列表里消失，界面又变回新版。这时候只能适应，或者去 chrome://flags 里找相关的 flag（有些界面改动同时有 flag 控制）。

找不到那个选项时的排查

列表里搜不到 redesign。几种可能：

Chrome 版本太新，这个 experiment 已经转正并从列表移除了
Chrome 版本太旧，还没有这个 experiment（那你的界面本来就是老版，不需要改）
关键词不对。experiments 的命名不统一，试试搜 network、filter、panel 这些词，或者干脆清空搜索框把整个列表扫一遍——列表不长，几十项

Experiments 标签页本身不存在。DevTools 的设置面板（齿轮图标或者 F1）左侧应该有 Preferences / Experiments / Filters / Devices 等几项。如果没有 Experiments，需要在 Preferences 底部找到 Restore defaults and reload 之外的开关，或者确认你打开的是 DevTools 的设置而不是 Chrome 的设置——两者的齿轮图标位置不同，DevTools 的在它自己的右上角。

改了没生效。必须重新加载 DevTools（不是重新加载页面）。快捷做法是关掉 DevTools 窗口再按 F12。有些改动还需要完全重启 Chrome。

Experiments 里几个值得开的

既然打开了这个页面，顺手说几个我会主动开的（名称可能随版本变化）：

Enable CSS <length> authoring tool in the Styles pane — 在 Styles 面板里给长度值加一个可拖动的滑块，调 padding、margin、font-size 时不用反复输数字。调视觉细节时很省事。

Timeline: event initiators — Performance 面板里显示事件的发起者，追踪「这个重排是谁触发的」时有用。

Protocol Monitor — 显示 DevTools 和浏览器之间的 CDP（Chrome DevTools Protocol）通信。做浏览器自动化（Puppeteer、Playwright）调试时能看到底层实际发了什么命令，排查「为什么这个 API 没生效」很直接。

Enable new Network panel filter bar（或类似名字）— 就是本文说的这个，看个人偏好。

Network 面板真正该记住的用法

界面怎么排布是次要的，Network 面板的核心能力在过滤语法和右键菜单里，这些不受界面改版影响。

过滤输入框支持一套查询语法，比点类型按钮精确得多。在过滤框里输：

status-code:404          只看 404
status-code:500          只看 500
method:POST              只看 POST 请求
domain:api.example.com   只看某个域名
mime-type:application/json
larger-than:100k         大于 100KB 的资源
resource-type:fetch      按资源类型（等价于点按钮）
has-response-header:cache-control
-domain:cdn.example.com  减号表示排除

多个条件空格分隔是「与」的关系。这套语法我用得最多的是 larger-than 和 status-code——找性能问题时先 larger-than:200k 把大文件揪出来，排查接口问题时 status-code:500 直接定位。

直接输文本（不带前缀）是对 URL 做子串匹配，输 /api/ 就能过滤出所有接口请求。也支持正则，用 / 包起来：

/\.(png|jpg|webp)$/

右键菜单里的几个高频操作：

Copy → Copy as cURL — 把请求转成 curl 命令，包含所有请求头和 body。这是我用得最多的功能：接口有问题时复制成 curl 发给后端，对方能直接复现，不用来回描述参数。
Copy → Copy as fetch — 转成 fetch() 代码，可以直接粘到 Console 里改参数重发。
Block request URL / Block request domain — 屏蔽某个请求，测试「这个资源加载失败时页面会怎样」。屏蔽规则在 Network conditions 面板里管理。
Replay XHR — 重发一个 XHR/fetch 请求，不用刷新整个页面。

面板上几个该常开的开关：

Preserve log — 保留跨页面导航的请求记录。调试登录跳转、OAuth 回调这类会跳页的流程必开，否则跳转瞬间日志就被清空了。
Disable cache — DevTools 打开时禁用缓存。测首次加载性能时必开。
Throttling — 网络节流，模拟 3G/4G。前面那篇讲图片优化的文章里提到过，测优化效果时用这个。

Waterfall 列的读法。鼠标悬停在某个请求的时间条上会展开详细阶段：

Queueing — 排队。太长说明并发连接数打满了（HTTP/1.1 下同域名 6 个）
Stalled — 阻塞。原因可能是代理协商、连接复用等待
DNS Lookup / Initial connection / SSL — 建连的三个阶段。首次访问某个域名才有，之后复用连接就没了。这也是 preconnect 能优化的部分
Request sent — 发送请求，通常极短
Waiting (TTFB) — 等服务器响应的第一个字节。这一段长就是后端慢，前端优化不了
Content Download — 下载响应体。这一段长就是资源太大或者网络慢

区分 TTFB 和 Content Download 是性能排查的第一个分岔口：TTFB 长找后端，Download 长做压缩和拆包。搞混这两个会白花很多时间在错的方向上。

界面变了但功能没丢

最后一句实话：DevTools 的界面这几年一直在改，每次大改都有人不适应。但功能基本只增不减，改的多是入口位置。与其每次都去 experiments 里改回旧版（而且改不了几次就会被转正的新版覆盖），不如花十分钟熟悉一下新的入口在哪。

找某个功能找不到时，最快的方式是在 DevTools 里按 Command/Ctrl + Shift + P 打开命令面板，输功能的英文关键词，它会列出所有匹配的面板和命令。这个入口不受界面改版影响，所有功能都能从这里找到。