在Firefox Developer Tools中更改列大小

Question

是否可以在Firefox Developer Tools中更改列宽？我该怎么办？

当我指向列边缘（如屏幕截图上的状态等）时，没有调整大小的工具，因此我可以看到整个内容。

Answer 1

更新：默认情况下此功能现已启用并启用，您可以使用devtools.netmonitor.features.resizeColumns标志禁用它（你疯了吗？）。

原始答案：您可能知道没有更改列大小的选项（从FF57开始），您唯一的选择是隐藏/显示列。它很容易，只需right-click在任何列上，您应该看到列列表，并可以选择/取消选择它们。

但那就是它？！不，您可以使用CSS更改列大小（破解开发工具），步骤如下：

1. 打开开发工具（使用F12或......）
2. 点击右上角的齿轮按钮

3. 检查以下两个选项：

   • Enable browser chrome and add-on debugging toolboxes
   • Enable remote debugging

4. 点击Ctrl+Shift+Alt+I并点击OK（在安全提示下）以打开Browser Toolbox

5. 您应该可以使用已打开的浏览器工具箱
检查Dev tools
6. 使用CSS进行游戏（与普通网页相同
）
7. 将自定义CSS保存在userChrome.css文件
中

需要有关userChrome.css的更多信息，请前往userchrome.org

以下是创建/修改userChrome.css的步骤：

• 打开about:support
• 点击Open Folder（{{1>}行中的）
• 打开/创建Profile Folder目录
• 打开/创建chrome文件
• 做我在第一部分中所说的内容

为了演示它是如何工作的，我将userChrome.css列之一的背景颜色更改为红色。



这是我的Network tab文件内容（以上示例）

userChrome.css

我只是为了时间而使用.requests-list-file.requests-list-column { background-color: red !important; color: #fff !important; } ，如果可以，请不要使用

Answer 2

虽然feature request和its dependency似乎有一些新进展，但Mehdi's answer于2016年创建，因此可以肯定地说，在Firefox默认支持列大小调整之前。

同时，这是我添加到userChrome.css中的CSS：

.requests-list-header-button {
    padding-inline-start: 0px !important;
    padding-inline-end: 0px !important;
}
.requests-list-method {
    min-width: 30px !important;
}
.requests-list-status {
    min-width: 40px !important;
}
.requests-list-file {
    min-width: 100px !important;
}

我想扩大 File 列，但是发现减小 Status 和 Method 列的宽度反而单独取得了很大的进步。样式还从列标题中删除了侧边距，以避免用…截断文本。

这些是默认列的类：

• requests-list-status
• requests-list-method
• requests-list-file
• requests-list-domain
• requests-list-cause
• requests-list-type
• requests-list-transferred
• requests-list-size
• requests-list-waterfall

请注意，如果您减小列宽过多，可能会导致对齐失败。如果您不知道将userChrome.css保存在哪里，或者需要查找其他列的类，请参见https://github.com/moby/moby/issues/23917。