How to inspect Firefox's UI?

Question

I'm trying to theme Firefox to match my OS's theme. I'm currently struggling to find out the DOM structure that both Firefox and extensions, like Tree Style Tabs, use. This is making it impossible to write the CSS to make my theme.

Is there a way to inspect Firefox's UI?

Answer 1

Firefox's UI

To inspect Firefox's UI you can use the Browser Toolbox.

Enable the Browser Toolbox

1. Press F12 to open the Page Inspector.
   Alternate: Right click the page then "Inspect Element (Q)".

2. Press F1 to open the Page Inspector Settings.
   Alternate: In the top right of the Page Inspector next to the close button; press the "⋯" button then "Settings".

3. Ensure the following settings are checked:

   • "Enable Browser chrome and add-on debugging toolbox"
   • "Enable remote debugging"

Open the Browser Toolbox

1. Press alt, "Tools", "Web Developer" then "Browser Toolbox".
   Alternate: Press ctrlaltshifti

Extensions

You can use the Browser Toolbox to inspect extensions. Additionally you can inspect extensions through about:debugging.

1. Navigate to about:debugging.
2. Go to the "This Firefox" page.
3. Find the extension you want to inspect.
4. Press "Inspect".