如何为DevTools的Network标签页设置横向布局？

问题背景 #

我知道可以通过Settings -> Preferences -> Appearance -> Panel Layout设置横向布局，但该设置仅对Elements标签页生效，想了解是否能将该布局应用到Network标签页。

实现方法 #

目前Chrome DevTools原生并未提供直接为Network标签页开启横向布局的选项，不过可以通过以下两种方式实现：

• 自定义DevTools样式

  1. 开启自定义主题权限：打开DevTools，按F1进入设置，切换到Experiments标签，勾选Allow custom UI themes。
  2. 创建CSS文件并添加以下代码：

     /* 强制Network标签页面板横向排列 */
     .network-panel .split-view-container {
       flex-direction: row !important;
     }
     .network-panel .split-view-sidebar {
       height: auto !important;
       width: 320px !important; /* 可根据需求调整宽度 */
     }
     

  3. 回到DevTools设置的Experiments标签，找到Custom CSS选项，导入刚才创建的CSS文件，重启DevTools即可生效。

• 第三方扩展辅助
  可以尝试安装支持DevTools自定义布局的扩展（如部分高评分主题类扩展），部分扩展提供了对Network标签页布局的定制选项，建议从Chrome应用商店选择正规扩展，避免安全风险。

注意事项 #

自定义CSS样式可能会随着Chrome DevTools的版本更新失效，届时需要根据新版本的DOM结构调整选择器；第三方扩展需注意兼容性，避免影响DevTools正常功能。

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