X
Tap here to go to the mobile version of the site.

Support Forum

Firefox's inspector does not display css rules for a specific website

Posted

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 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.

Chosen solution

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.

Read this answer in context 2

Additional System Details

Installed Plug-ins

  • Google Update
  • Intel web components updater - Installs and updates the Intel web components
  • Intel web components for Intel® Identity Protection Technology
  • Shockwave Flash 20.0 r0
  • VLC media player Web Plugin
  • Plugin for Wacom tablets.

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0

More Information

jscher2000
  • Top 10 Contributor
8799 solutions 71970 answers

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.

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.

Question owner

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

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

Modified by myQuil

cor-el
  • Top 10 Contributor
  • Moderator
17588 solutions 159105 answers

Can you load all five CSS files that show in the page source directly via the location/address bar?

Can you load all five CSS files that show in the page source directly via the location/address bar?
jscher2000
  • Top 10 Contributor
8799 solutions 71970 answers

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?

''myQuil [[#answer-845298|said]]'' <blockquote> 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". <br><br> Maybe this is the issue? https://bugzilla.mozilla.org/show_bug.cgi?id=1084395 </blockquote> 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?
jscher2000
  • Top 10 Contributor
8799 solutions 71970 answers

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?

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?

Question owner

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.

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.

Modified by myQuil

Question owner

also, safe mode did not work :(

also, safe mode did not work :(
jscher2000
  • Top 10 Contributor
8799 solutions 71970 answers

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?

''myQuil [[#answer-845416|said]]'' <blockquote> Expected 'none', URL, or filter function but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. theme.scss.css:1:124 </blockquote> 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?

Question owner

scripts are loading in the Debugger section without any problems

scripts are loading in the Debugger section without any problems
cor-el
  • Top 10 Contributor
  • Moderator
17588 solutions 159105 answers

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
Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> 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 *https://support.mozilla.org/kb/Safe+Mode *https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

Question owner

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

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

Helpful Reply

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.

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.
cor-el
  • Top 10 Contributor
  • Moderator
17588 solutions 159105 answers

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?

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/ *https://developer.mozilla.org/DOM_Inspector *https://developer.mozilla.org/Introduction_to_DOM_Inspector
jscher2000
  • Top 10 Contributor
8799 solutions 71970 answers

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
''myQuil [[#answer-845298|said]]'' <blockquote> I even tried re-installing Firefox, but that didn't work either.</blockquote> 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

Question owner

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.

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.

Modified by myQuil

Chosen Solution

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.

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.

Modified by myQuil

perkin5 1 solutions 4 answers

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?

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?

Question owner

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.

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.
jscher2000
  • Top 10 Contributor
8799 solutions 71970 answers

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 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.
jscher2000
  • Top 10 Contributor
8799 solutions 71970 answers

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.

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.