DevTools can not see all inherited styles

Developer Tools
1

For some time now, Firefox DevTools can not show the CSS that targets an HTML node. I’m not sure if it’s Firefox the browser or the TypeScript DevTools that is the culprit.

One site where this is apparent is netflix. If you login and open one of the info cards, you can not select any text. This means that user-select: none; must be set on the HTML where your mouse is. If you open DevTools and look at the Rules or Computed panes, user-select is nowhere to be seen.

You can select any HTML node and enable user-select: all; via the Rules pane and verify that you can now select text on the page.

This is not the only place where DevTools struggle to find the CSS that cascades to an HTML node, but it’s the one example I have right now. I will add more examples when I come across new ones.

I’m sure, I’m not the only one who have notice this. Do you have an example where styles that must be there are not, in either the Rules or Computed panes in the Inspector?

Version: Mozilla Firefox 140.4.0esr

2

Hello Jon, thanks for the report.

user-select is not an inherited property (see user-select - CSS | MDN), but yes, it can impact a “child” element, and this might be tricky to debug. The computed panel doesn’t help here, as we get a user-select: auto and we don’t link to the “parent” element with the set user-select

I filed 1995242 - Surface parent value of user-select when computed value of user-select is auto to see how this can be improved.

Do you have other examples of declarations that are not displayed?