2

Is it possible to edit the visual layout of FireFox's developer tools? I'm talking about the tools themselves, not the webpage that the tools are inspecting.

I want to narrow the large gap between the CSS property name and value:

screenshot of large gap in firefox dev tools

I've read that FireFox's UI is built in XUL and CSS, so theoretically it should be possible to append a custom stylesheet but I don't haven't found any info on how to customize the stylesheet.

1 Answer 1

4

It's possible by creating a chrome/userContent.css file in the profile directory. Browser Toolbox can be used to inspect the DevTools elements, similar to how DevTools inspects a webpage.

Mozilla's documentation on userContent.css is a bit outdated, so a newer guide like the one from Dedoimedo can be helpful. In particular, toolkit.legacyUserProfileCustomizations.stylesheets needs to be enabled in 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;;
    }
}

To change the tab bar itself you'd put styles in @-moz-document url-prefix("about:devtools-toolbox")

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .