Rules empty in developers tools

Developer Tools
#1

Sometimes (many times a day, sometimes several times per 5 minutes), the rules in my developer tool disappear.

Screenshot from 2020-01-10 14-51-40
Screenshot from 2020-01-10 14-51-40796×1104 62.9 KB

Selecting a different element doesn’t fix it. Only re-opening the dev tools or refreshing the page seems to fix it.

Browser console:

Screenshot from 2020-01-10 14-52-02
Screenshot from 2020-01-10 14-52-021067×160 30.4 KB

I’m using the livereload plugin (so a lot of CSS operations going on), but I think it also happens without it.

#2

Hi Antoine, thanks for the report! Can I ask for a bit more information?

  1. Which Firefox version are you seeing these issues with? Is it on Firefox release, beta/developer, nightly? And on which operating system? (If you happen to be using Linux, can you check the version number? Some Linux distributions pack old versions of Firefox.)
  2. Does this happen on specific pages (especially public pages that we can check out)?
  3. Does this happen when you do something specific in the Inspector? For instance, selecting a specific HTML element in the HTML view (top part in your screenshot), or selecting a specific element with the “Pick an element” button.

Let’s try to narrow down some steps to reproduce.

1 Like
#3

Thanks for your answer! Sorry for the obvious info missing.

  1. I use Firefox release, 72.0.1-1 on Arch Linux.
  2. It only happens after some interaction / actions. It always displays the rules the first time. For now I’ve only seen it happen on the website I’m working on
  3. Let me try to narrow this down.

EDIT: it’s not always fixed by refreshing the page. Closing the inspector fixes it.

#4

It’s definitely related to live reload (https://addons.mozilla.org/en-US/firefox/addon/livereload-web-extension/)

  1. Load your page
  2. Connect livereload
  3. Save the CSS file on your editor, multiple times maybe, sometimes only once triggers the bug.
  4. Watch the CSS being reloaded in FF, clicking the dom elements makes the rules panel very slow to respond, or even directly blank.
  5. Once in this sate, refresh the page, the rules panel definitely doesn’t work now until closing the dev tools
#5

Interesting to note that the “computed” tab still works, but not the Rules and Layout (at least) tabs.

#6

Oh, interesting, I’ve heard of livereload-related problems in the past, on this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1014459
Sadly it was closed at the time because it didn’t seem to happen anymore.
But there seems definitely something weird going on with the Rules panel and the way livereload re-injects styles into the page.

#7

I installed the extension and livereload and tried to reproduce. So far I couldn’t, but I could see a first problem whereby the rules panel doesn’t update to show the new style as they get reloaded. You need to select a new node and go back to the previous node to see them.
That might be a first lead to investigate.

#8

Thanks for debugging this far already! One thing I can add is that I’m working on a project with a lot of rules.

i used this script to count them, and it’s well over 5000.

Screenshot from 2020-01-10 18-51-52
Screenshot from 2020-01-10 18-51-52855×442 50.6 KB

Ideally yes, I’d split in more files, spend some time refactoring stuff, but that’s not the main focus right now.

Reality is messy!

(side note: I’m coming from 5+ years of Chrome development experience and progressively switching to FF. Chrome(ium)'s dev tools handled that website without any problem).

#9

I have news: it definitely happens w/o Live-reload, so I think we can treat this as a general issue and not a plugin/add-on triggered issue.

How I can reproduce:

  1. Load my page with the huge CSS file
  2. Inspect an element, see that the rules work
  3. Change the CSS, reload the page in FF (Ctrl+R, caching is disabled by the inspector being opened). The CSS change doesn’t need to affect the selected element.
  4. See the the rules don’t work anymore. If it still works, the next refresh won’t, it seems (even if the change is applied visually).
  5. If you wait a few secs, the next refresh fixes it.
#10

Not sure if this is generally applicable, but I had the same set of reproductions as you have with the following differences:

  • it was an extension, not a web-site (but the browser toolset is the same)
  • Live Reload was not involved, but “reloading” the extension via the browser debug tools was.
  • It was firefox developer edition on Linux

For me I found it occurred when a Firefox update was partially installed - ie staged in the “restart to complete update state”.

After restarting to complete the update the empty css rules stopped reoccurring (presumably until the next background update).

Hope this helps someone.

#11

I have the same problem. The mentioned solutions work sometimes, sometimes not.

When working on a site, and after each page refresh the rules are empty and you need to close the developer tools, sometimes more than once until it works, sometimes you need to restart Firefox, it is really a nightmare and extremely time consuming.
I really think of changing the browser because of this although I liked Firefox in the past.
Using Firefox Developer Edition.
TrinitySu

#12

Same problem too. Only happens when inspecting a specific website I’m developing. Other websites works fine.
Please fix Mozilla, Firefox dev tools is so much better than Chrome!

#13

Note that there is a bug opened to track this issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1699648

We know where we crash, but we still don’t have consistent steps to reproduce. So in case anyone has a public website where they can reproduce the issue, consider sharing it on the bug. Thanks.

Edit: well, we just managed to reproduce and find consistent STRs! The issue seems to be triggered by editing a stylesheet which gets loaded via @import.

#14

This issue should be fixed in the next Nightly (FF89)

#15

I’m still seeing this issue on Firefox Dev 94. I’m using Vite + Vue3/Nuxt3. I suspect something with Vite’s hot reload is breaking things. Vite works a little differently from Webpack and uses “Hot Module Replacement”. I’m seeing this error developing on localhost.

As mentioned above, it would randomly start working again after refreshing several minutes later. This bug happens pretty much constantly with the tech stack I’m using. Another thread mentioned deleting cookies helped, I don’t have any cookies on localhost, so this doesn’t fix for me. Neither does opening a private window which I also saw mentioned.

I’ve noticed it happen when I stopped “npm run dev” and restarted it immediately after, Nuxt will automatically re-attach itself; however, dev tools are now bugged out. Opening a new tab strangely does not fix the issue. Starting the dev server on a different port also does not fix the issue. However, navigating to one of the pages in my localhost site, and then navigating back to the homepage partially fixed it. I still have an element that isn’t working at all. Very strange.

I’m seeing this in the Firefox Desktop remote debugging console when I select an element in the inspector:

image
image891×347 69 KB

Firefox Dev 94.0b9 (64-bit)
Ubuntu 20.04.3 LTS

#16

Hi!

The fix we landed in https://bugzilla.mozilla.org/show_bug.cgi?id=1699648 resolved a cache issue for stylesheets loaded via @import. So most likely we have a similar problem for your scenario, where DevTools retrieve an outdated version of your stylesheet.

Can you share how your stylesheet is loaded here? By any chance, is your project open source, or could you extract a small test case we could use to reproduce the bug?

Thanks! (will file a bug once we get some more information)