![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
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.
चुने गए समाधान
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.
संदर्भ में यह जवाब पढ़ें 👍 2All Replies (20)
Had you ever inspected this site before in an earlier version of Firefox where you recall that it worked on your system? In other words, do you think this is a new problem specific to Firefox 44?
I don't see a problem on Windows 7 on a randomly selected condiment (attached screenshot).
Could you reload the page bypassing the cache using Ctrl+Shift+r to make sure all the CSS downloads fresh in case there is a cache corruption issue.
I have inspected this site before on previous versions with success, so it might be an issue with the latest version, only it hasn't been an issue with any other site thus far. Also, I'm running Windows 10. Ctrl+Shift+r didn't work, unfortunately. I even tried re-installing Firefox, but that didn't work either.
Also, I noticed that the Style Editor tab shows that only 1 css file loaded, a very brief file, and it's simply called "css". It also displays an error message saying "Style sheet could not be loaded http://cdn.shopify.com/s/files/1/1033/9635/t/1/assets/timber.scss.css?6052438879326238697".
Maybe this is the issue? https://bugzilla.mozilla.org/show_bug.cgi?id=1084395
myQuil द्वारा
Can you load all five CSS files that show in the page source directly via the location/address bar?
myQuil said
I noticed that the Style Editor tab shows that only 1 css file loaded, a very brief file, and it's simply called "css". It also displays an error message saying "Style sheet could not be loaded http://cdn.shopify.com/s/files/1/1033/9635/t/1/assets/timber.scss.css?6052438879326238697".
Maybe this is the issue? https://bugzilla.mozilla.org/show_bug.cgi?id=1084395
That old bug was fixed 10 versions ago, and also you mentioned the styles appear to be applied, so the failure to download isn't the problem. It seems to be more of a parsing issue affecting the Inspector, and I don't know why yours isn't showing you the CSS files.
Are any errors listed in the Console area?
Also, could you test in Firefox's Safe Mode? In Safe Mode, Firefox temporarily deactivates extensions, hardware acceleration, and some other advanced features to help you assess whether these are causing the problem.
If Firefox is not running: Hold down the Shift key when starting Firefox.
If Firefox is running: You can restart Firefox in Safe Mode using either:
- "3-bar" menu button > "?" button > Restart with Add-ons Disabled
- Help menu > Restart with Add-ons Disabled
and OK the restart.
Both scenarios: A small dialog should appear. Click "Start in Safe Mode" (not Refresh).
Any improvement?
If I open page source and click the css links, yes, they all load properly.
In the console, there aren't any errors but there are tons of warnings. Here are a few of them, many are repeats:
Expected 'none', URL, or filter function but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. theme.scss.css:1:124
Error in parsing value for 'cursor'. Declaration dropped. theme.scss.css:1:944
Unknown property 'user-select'. Declaration dropped. theme.scss.css:1:1210
This is probably important: I just noticed that when I try to click the plus button in the inspector's sidebar to "Add New Rule", nothing happens.
myQuil द्वारा
also, safe mode did not work :(
myQuil said
Expected 'none', URL, or filter function but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. theme.scss.css:1:124
Seems that Firefox is loading and parsing the file. I see the same warnings.
Normally, if you were to click the blue linked part on the right, it would take you to the Style Editor section into that style sheet. But... if the style sheet won't load, then presumably that will bomb out in some manner.
How about scripts: does the Debugger section show any scripts from cdn.shopify.com?
scripts are loading in the Debugger section without any problems
Start Firefox in Safe Mode to check if one of the extensions (3-bar Menu button/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.
- Switch to the DEFAULT theme: 3-bar Menu button/Tools > Add-ons > Appearance
- Do NOT click the Reset button on the Safe Mode start window
cor-el, when I say "safe mode did not work" what I mean is, I was successful in entering safe mode, it simply didn't solve the Payk problem
I just want to reiterate something because I think it might be a key point:
The + button (Add New Rule), under the Rules tab. When I click on it, nothing happens, the Rules section remains blank.
Can you confirm that all style sheets are loaded and that the CSS rules are applied?
Does the DOM Inspector show the rules as being applied?
- DOM Inspector: https://addons.mozilla.org/firefox/addon/dom-inspector-6622/
myQuil said
I even tried re-installing Firefox, but that didn't work either.
I don't know whether you saw the recommendation to rename the program folder before doing the reinstall. In case the updater/installer is not properly replacing potentially broken or conflicting files, that sometimes resolves otherwise inexplicable issues. Here's the whole spiel:
Clean Reinstall
We use this name, but it's not about removing your settings, it's about making sure the program files are clean (no inconsistent or alien code files). As described below, this process does not disturb your existing settings. Do NOT uninstall Firefox, that's not needed.
(A) Download a fresh installer for Firefox 44.0.2 from https://www.mozilla.org/firefox/all/ to a convenient location. (Scroll down to your preferred language.)
(B) Exit out of Firefox (if applicable).
(C) Rename the program folder as follows:
(32-bit Firefox on 64-bit Windows)
C:\Program Files (x86)\Mozilla Firefox
to
C:\Program Files (x86)\OldFirefox
(Other systems)
C:\Program Files\Mozilla Firefox
to
C:\Program Files\OldFirefox
(D) Run the installer you downloaded in step (A). It should automatically connect to your existing settings.
Will the Inspector work properly in a cleanly reinstalled Firefox?
Note: Some plugins may exist only in that OldFirefox folder. If something essential is missing, look in these folders:
- \OldFirefox\Plugins
- \OldFirefox\browser\plugins
I fixed the problem by going into AppData -> Roaming -> Mozilla -> Firefox -> Profiles
Then, the profile folder <randomCharacters>.default was renamed, and a new empty folder was created with the original profile name.
myQuil द्वारा
चयनित समाधान
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.
myQuil द्वारा
I have just encountered this problem for the site http://www.wylye-valley-dfas.nadfas-wessex-area.org/. The solution above does not work. The Style Editor show the correct css file loaded with all rules. The Console shows no errors. The page looks correct. The Rules panel shows rules for the html tag but blank for all others.
What could be the cause?
It actually seems to work for anything outside of the <body> tag. Still not sure what's causing the problem, but I figured it's worth mentioning.
Hi perkin5, could be a problem with parsing the @media rules, but that's just a guess and it could be anything. Do you want to file a bug on it?
https://bugzilla.mozilla.org/enter_bug.cgi
There is a "Component" for Developer Tools: Inspector that you can list it under.
Hi myQuil, the file you deleted stores certain rules for secure connections (HSTS, HPKP, possibly others), so that will be relevant to some sites, but apparently not this particular one.