Ok, I’m going to try and be concise and to the point. I’ve noticed this over the past week or so, and I really need help.
I use the Inspector daily to develop websites and I typically live in the inspector tool to the left/Rules (CSS) on the right. I started noticing last week that when I hover over any element I’m working on the CSS for and click it, what shows up in the Rules side of the inspector isn’t correct at all. I’ll give you an example. I’m working on the .phone class at the moment. In my mediaqueries doc I have on line 15 this:
The class is correct, but the CSS is totally wrong. When I click the CSS location in the Rules section it takes me to the Style Editor and in there it doesn’t even recognize the .phone class. The only way I can fix this is to completely quit Firefox on my Mac, clear the cache, history, everything just to make it show properly. Once I go back to the page and check the inspector again, it’s correct.
I’ve already completely dumped Firefox from my Mac, reloaded it, etc. Nothing is working. On Chrome it works perfectly fine, but I’ve always worked in FF. Someone please tell me there’s something silly I’m missing.
I don’t see any obvious reason why we would fail to show the correct CSS here. The only thing that comes to mind would be a weird cache issue? Maybe try to make sure “disable cache” is checked in the netmonitor tab?
Can you share a URL where we could try to reproduce the issue?
Thanks!
It is not possible for me to reproduce the issue. In the Rules view I see this using Windows 10 and Firefox 86/Nightly 88 and inspecting the element with the .phone class:
Does it make a difference if you disable source maps?
If it doesn’t, you might try to create a test profile and check whether that makes any difference. If it does, it’s obviously something related to your profile settings.
