Rules empty in developers tools

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

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

Browser console:

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

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

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.

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

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

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.

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.

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.

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

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.