Inspecting the UI with devtools
fxcss 0.22.1Source documentation
Firefox's normal inspector only sees page content. The Browser Toolbox is
the version that can inspect the browser's own UI, and it's off by default
behind four prefs. fxcss turns them on in its throwaway profile, so in watch
and pick you can just press:
- macOS —
Cmd+Opt+Shift+I - Windows / Linux —
Ctrl+Alt+Shift+I
You get a full inspector over the browser chrome: hover to highlight, read
computed styles, and live-edit rules to try things before committing them to
your CSS. fxcss pick is the fast path for "what is this called"; the Browser
Toolbox is the thorough one for "why is this rule not winning".