☰

是否可以编辑 FireFox 开发人员工具的样式表？

tag-icon • tag-icon styles developer-tools firefox-developer-edition
是否可以编辑 FireFox 开发人员工具的样式表？

是否可以编辑 FireFox 开发人员工具的视觉布局？我指的是工具本身，而不是工具正在检查的网页。

我想缩小 CSS 属性名称和值之间的巨大差距：

Firefox 开发工具中巨大间隙的屏幕截图

我读过FireFox 的 UI 采用 XUL 和 CSS 构建，所以理论上应该可以附加自定义样式表，但我没有找到有关如何自定义样式表的任何信息。

答案1

可以通过创建一个chrome/userContent.css配置文件目录中的文件。浏览器工具箱可用于检查 DevTools 元素，类似于 DevTools 检查网页的方式。

Mozilla 的文档userContent.css有点过时，所以像来自 Dedoimedo 的可能会有所帮助。具体而言，toolkit.legacyUserProfileCustomizations.stylesheets需要在 中启用about:config。

/* Tab contents */
@-moz-document url-prefix("chrome://devtools/content/") {
    .computed-property-view {
        justify-content: space-between;
        column-gap: 20px;
    }

    .computed-property-name-container {
        width: auto !important;
    }

    .computed-property-value-container {
        flex: 0 0 auto !important;;
        padding-right: 5px;
    }

    .computed-property-value {
        padding-inline-start: 0 !important;;
    }
}

要更改标签栏本身，你需要将样式放入@-moz-document url-prefix("about:devtools-toolbox")

相关内容