firefox - 在Firefox开发人员工具中更改列大小

Question

可以在Firefox开发人员工具中更改列宽吗？我该怎么做？

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

Answer 1

更新:此功能现已可用，并且在Firefox 67中已默认启用。您可以使用devtools.netmonitor.features.resizeColumns标志将其禁用(您疯了吗？)。

原始答案:您可能知道没有更改列大小的选项(从FF57开始)，您唯一的选择是隐藏/显示列。这很容易做到，只要在任何列上添加right-click，您就应该看到列列表，并且可以选择/取消选择它们。

就是这样吗？不，您可以使用CSS更改列的大小(hack开发工具)，步骤如下:

打开开发工具(使用F12或...)

单击齿轮按钮，在右上角

检查以下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

这是创建/修改 userChrome.css的步骤:

打开about:support

单击Open Folder(在Profile Folder行中)

打开/创建chrome目录

打开/创建userChrome.css文件

执行我在第一部分中所说的

为了演示其工作原理，我将 Network tab列之一的背景颜色更改为红色。



这是我的 userChrome.css文件的内容(对于上面的示例)

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

我只是为了时间而使用 !important，如果可以，请不要使用