How to edit userChrome.css live - adamhotep/Firefox-Tweaks GitHub Wiki

You can edit userChrome.css live using the Browser Toolbox in Firefox's Web Developer tools. (From the main menu, select Developer Tools and then Browser Toolbox as illustrated by this GIF:

Within the Browser Toolbox, go to Settings by clicking the gear icon (⚙️) on the top right. At the right of that screen, in the Advanced settings section, there are two boxes to check:

☑️ Enable browser chrome and add-on debugging toolboxes ☑️ Enable remote debugging

Close the Browser Toolbox and then open it again. It'll prompt you with a warning about remote connections (allow it).

Navigate to the { } Style Editor tab and select your userChrome.css file. For me, it's about a quarter of the way down the list. Any edits you make to this file will be reflected in real time, and they can be saved permanently by clicking the Save link by the file's name on the list to the left.

When you're done toying around, it's best for your security and performance if then disable these two check boxes and close the Browser Toolbox.