Skip to content

How to edit userChrome.css live

Jump to bottom
Adam Katz edited this page Mar 10, 2018 · 1 revision

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:

Firefox → Web Developer → Browser Toolbox

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.

Clone this wiki locally