Inspector will not show css on some websites

Question

I always used the ff inspector for debugging css and never had this problem before, I tried to check the css of this website https://www.duolingo.com (the problem only occurs when logging in), but the inspector shows nothing for which element on the webpage:

The inspector works fine on other websites, although not sure if the website developers intended to hide css or not, but I found that some weird css links seem to use proxies:

Is this some kind of new trick to hide CSS or is it a bug in the firefox inspector? or is it something else?

I am using Firefox version 45.0.1

Answer 1

I am sure this is a known bug that has already been fixed. I do not have an account on this website, so I can’t be sure, but we have had very similar problems in the recent past.

This could be: https://bugzilla.mozilla.org/show_bug.cgi?id=1255787 What was fixed in FF48 (it had a built-in stylesheet <style> that defined the sourcemap URL).

Or it could be: https://bugzilla.mozilla.org/show_bug.cgi?id=1249888 Which was fixed in FF47 and raised to FF46 too (this is due to the incorrect CSS source code URL).

You can verify this by retesting with these versions. If it still does not work, write a new error here: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector with instructions for reproducing and, possibly, insert errors that may be present in the browser console (ctrl + shift + J).

In any case, this is not required. In rare cases when there really are no css rules on a given element, a panel displays a message like "no valid element selected" or "no css rules found", I don’t remember exactly which one. If the panel is empty, then this is definitely a mistake.

Answer 2

I saw this in Firefox 49 when checking out my own site on the development server. When I went to the Style Editor tab, the list was huge, and the counter kept spinning.

I went to dev tool settings and turned off "show original sources". The Style Editor tab now displays two files, and I can see the CSS rules (although, of course, not my smaller rules).

I already found this already as https://bugzilla.mozilla.org/show_bug.cgi?id=1097834