Inspector won't show css on some websites

Question

I've always used ff inspector to debug css and never had this issue before, I tried to check the css of this website https://www.duolingo.com (the issue occurs only when I'm logged in), but the inspector is not showing anything for any element on the webpage:

The inspector works fine on other websites though, not sure if the website developers intended to hide the css or not, but I found some strange css links seems to be using a proxy:

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

I'm using Firefox version 45.0.1

Answer 1

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

It could be either: https://bugzilla.mozilla.org/show_bug.cgi?id=1255787 Which has been fixed in FF48 (it involved an inline stylesheet <style> which defined a sourcemap URL).

Or it could be: https://bugzilla.mozilla.org/show_bug.cgi?id=1249888 Which has been fixed in FF47 and uplifted to FF46 too (it involved an incorrect CSS sourcemap URL).

You can verify this by tested again with these versions. If it still doesn't work, please feel free to file a new bug here: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector with steps to reproduce and possibly, pasting the errors that may be present in the browser console (ctrl+shift+J).

In any case, this isn't a wanted behavior. In the rare cases where there are indeed no css rules to be shown on a given element, then the panel shows a message like "no valid element selected" or "no css rules found", I can't remember exactly which one. If the panel is just empty, then that's most definitely a bug.