0

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

0

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")

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.