Surprisingly hard to google, thanks to the name of Google's own browser...

I'm making modifications to my userChrome.css file to move the findbar (ctrl-F) to the top right, to mimic what I'm used to in Google Chrome. I'd like to do more customisation, but I've no idea how to find out what each element etc is called.

Is there a simple trick that I'm missing?


1 Answer 1


Is there a simple trick that I'm missing?

Simply put, yes. Firefox has the Browser Toolbox, which is pretty much exactly what you’d think: The standard F12 Developer Tools, only now they inspect the XUL window.

The linked docs say this:

The Browser Toolbox is not enabled by default. To enable it you need to check the settings “Enable chrome and addon debugging” and “Enable remote debugging”.

To do this, open the Developer Tools Settings, go to the section Advanced Settings, and check the settings “Enable browser chrome and add-on debugging toolboxes” and “Enable remote debugging”.

The Browser Toolbox is then available by pressing Ctrl+Alt+Shift+I (Cmd+Opt+Shift+I on macOS) or from the hamburger menu → More tools (or from the classic menu bar → Tools).

To get the full experience, check “Multiprocess” at the top of the window. You will then also see all browser extensions, tabs and frames.

  • 1
    Perfect, thank you. I'd have found it ages ago if I'd just searched for "UI" rather than "chrome"!
    – Codemonkey
    Commented Jan 25, 2023 at 16:49

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