X
モバイル版サイトに移動するには、ここをタップします。

サポートフォーラム

このスレッドはアーカイブに保管されました。 必要であれば新たに質問してください。

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

この回答をすべて読む 2

システム詳細の追加情報

インストールされたプラグイン

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

アプリケーション

  • ユーザーエージェント: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0

詳細情報

jscher2000
  • Top 10 Contributor
解決数 6435 件 回答数 52726 件
投稿日時

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.

質問者

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

この投稿は myQuil により に変更されました

cor-el
  • Top 10 Contributor
  • Moderator
解決数 15463 件 回答数 140060 件
投稿日時

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
解決数 6435 件 回答数 52726 件
投稿日時

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
解決数 6435 件 回答数 52726 件
投稿日時

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?

質問者

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.

この投稿は myQuil により に変更されました

質問者

also, safe mode did not work :(

also, safe mode did not work :(
jscher2000
  • Top 10 Contributor
解決数 6435 件 回答数 52726 件
投稿日時

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?

質問者

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
解決数 15463 件 回答数 140060 件
投稿日時

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

質問者

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

役に立った返信

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
解決数 15463 件 回答数 140060 件
投稿日時

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
解決数 6435 件 回答数 52726 件
投稿日時

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

質問者

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.

この投稿は 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.

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 により に変更されました

perkin5 解決数 1 件 回答数 4 件
投稿日時

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?

質問者

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
解決数 6435 件 回答数 52726 件
投稿日時

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
解決数 6435 件 回答数 52726 件
投稿日時

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.