如何禁用Chrome DevTools瀑布流？屏幕空间不足需隐藏网络面板瀑布流

嘿，我刚好踩过这个坑——默认设置里确实没有直接隐藏瀑布流的选项，但有两个实用的办法能解决你的问题：

方法一：临时隐藏（快速便捷） #

如果你只是偶尔需要隐藏瀑布流，用DevTools的命令菜单就行：

• 打开Network面板后，按下 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac）调出命令菜单
• 在菜单里输入 Hide Network Waterfall，选中执行后，瀑布流就会立刻消失；之后要恢复的话，输入 Show Network Waterfall 就能调回来

注意：这个命令是Chrome较新版本才有的功能，如果你的浏览器版本偏旧，可能找不到，那就试试下面的永久自定义方法。

方法二：永久隐藏（自定义UI样式） #

要是你想长期隐藏瀑布流，可以通过自定义DevTools样式实现：

1. 打开DevTools，按下 F1 打开设置面板
2. 切换到「Experiments」标签，勾选 Allow custom UI themes 选项，然后关闭设置面板
3. 再次按下 Ctrl+Shift+P/Cmd+Shift+P，输入 Show user stylesheet 并打开对应的CSS文件
4. 把下面的代码粘贴进去并保存：

/* 彻底隐藏Network面板的瀑布流区域 */
.network-panel .timeline-grid-container {
    display: none !important;
}

/* 可选：让请求列表占满整个面板宽度，充分利用空间 */
.network-panel .request-list-container {
    width: 100% !important;
}

5. 刷新DevTools（可以按 F5 或者关闭重开），之后Network面板的瀑布流就会一直隐藏了

内容的提问来源于stack exchange，提问作者jmbarbier