Firefox's inspector does not display css rules for a specific website
The website in question is www.payk.ca When I right-click on an element and select "Inspect Element (Q)" I can see the html , but not the CSS rules being applied to a selected element, despite the fact that the CSS is being applied to the site appropriately. Chrome's inspector works, Microsoft Edge's inspector works, Firefox's doesn't.
Gekose oplossing
The problem occurs due to just one file:
AppData/Roaming/Mozilla/Firefox/Profiles/.default/SiteSecurityServiceState.txt
Either delete this file, or remove any lines that are related to the site in question (in my case, Shopify), and the CSS should display again.
Lees dié antwoord in konteks 👍 2All Replies (8)
Aha! I fixed it. The problem was that I had deleted a body tag font-family rule but inadvertently left the words 'sans-serif' in the code. Odd that it had no effect on the appearance of the page but broke Developer Tools.
Many thanks for your responses.
I had the same problem on my website when both bootstrap 3.3.6 and prefixfree 1.0.7 were used. Removing either of these css solved the problem. So I removed prefixfree in my case.
Gewysig op
This happens for me at twitter.com. Not solved so far.
Hi S-ed, I don't notice anything special about Twitter this morning. I didn't log in, just browsed a page I often read.
I find the rules occasionally go blank on a page and I have to reload to see the rules again. I haven't noticed a pattern as to what causes it. And I never remember to check the console for errors...
If I'm reloading page with inspector's Style Editor opened, I'm getting this: http://i.imgur.com/unsxBB5.png Even though page is showing properly styled. No errors in console as well (except some dropped declarations). Oh. And, same thing in safe mode.
Gewysig op
Hi S-ed, I was thinking of the Rules panel of the Inspector, not the Style Editor.
I don't know what causes that error (red bar).
@jsher2000 Yep that was just an addition, the rules tab sometimes just blank, and in console log links on the right are unclickable.
I have same problem with another site. Safe mode doesn't help. Console shows warnings from 'unloadable' css, but clicking on warnings' links leads to same Style Editor. Sometimes open trouble css in new tab and some page reloads after it helps Inspector to work properly. Using new profile leads to infinite loading throbber in css list of Style Editor.
Gewysig op