在 Firefox 开发者工具中更改列大小

Question

是否可以在 Firefox 开发者工具中更改列宽？我该怎么做？

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

Answer 1

更新：此功能现在可用并在 Firefox 67 中默认启用。您可以禁用它（你疯了吗？）使用 devtools.netmonitor.features.resizeColumns 标志。

原始答案：您可能知道没有更改列大小的选项（从 FF57 开始），您唯一的选择是 hide/show 列。这很容易做到，只需 right-click 在任何列上，您应该会看到列列表并且可以 select/un-select 它们。

但仅此而已？！不，您可以使用 CSS（破解开发工具）更改列的大小，步骤如下：

打开开发工具（使用 F12 或...）
~~单击齿轮按钮，右上角~~转到Settings，快捷方式：F1
检查这 2 个选项：
- Enable browser chrome and add-on debugging toolboxes
- Enable remote debugging
点击 Ctrl+Shift+Alt+I 并单击 OK（出现安全提示）打开 Browser Toolbox
您应该可以使用打开的浏览器工具箱
检查Dev tools
玩CSS（和普通网页一样）
将您的自定义 CSS 保存到 userChrome.css 文件

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

这是 create/modify userChrome.css:

的步骤

打开about:support
单击 Open Folder（ 在 Profile Folder 行 中）
Open/Create chrome 目录
Open/Create userChrome.css 文件
按照我第一节说的做

为了演示它是如何工作的，我将 Network tab 的其中一列的背景颜色更改为红色。

这是我的 userChrome.css 文件内容（上面的例子）

.requests-list-file.requests-list-column {  
    background-color: red !important;
    color: #fff !important;
}

我用!important只是为了节省时间，可以的话就不要用了

Answer 2

虽然一些最近在 feature request and its dependency 方面取得了进展，但后者是在 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[ 的宽度=50=] 列反而单独做了很大的改进。这些样式还从 headers 列中删除了侧边距，以避免文本被 ….

截断
这些是默认列的类：

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 或者您需要查找类的其他列，请参阅 Mehdi's answer。

在 Firefox 开发者工具中更改列大小

Change columns size in Firefox Developer Tools

firefox

firefox-developer-tools