Inspect User Agent Styles in Firefox DevTools
User agent styles refer to the styles loaded by the default stylesheets within a browser. Firefox has some basic style rules that get applied to every page - for instance, links are blue and <h1> tags are big and bold with margins.
Sometimes these styles can interact with the styles you add to a page, which is why it is important that you can see them in devtools. I recently added a feature in Firefox 32 (currently Nightly) that lets you inspect these rules. See Bug 935803 for the implementation details.
Within the inspector, these styles behave pretty much like any other style on the page. It lists rules in the order of application, and you can see which rules have been overridden. There are a few ways that devtools distinguishes between the UA styles and normal styles:
- They are not editable. Since you can’t change these files, you are not able to edit/disable them within the tools.
- They are shown with a slightly different background color.
- The links to the stylesheet open a popup window to view the source of a sheet instead of loading the sheet in the Style Editor. There isn’t much purpose for loading these in the style editor (see 1), but seeing the source of the sheet can still be nice for the curious.
Enabling User Agent Styles
This is turned off by default. To enable user agent styles, select the “Show Browser Styles” checkbox from the options panel:
You can open any page and toggle this feature on to see it. But here’s a quick page to try it with:
data:text/html,<blockquote style='color:red;' type=cite><pre _moz_quote=true>fun <a href='foo' style='color:orange'>to</a> inspect</pre></blockquote>
June 30th, 2014 at 8:22 am
[…] 6 juin : Inspecter les styles du navigateur (agent utilisateur) dans les outils de développement de Firefox traduction du billet de Brian Grinstead. […]