Google Chrome Dev Tools inspect element styles not showing

Question

Starting a couple of weeks ago....on some of our sites, but not all, when inspecting an element, the styles tab only shows the "styles box", but not the actual styles relating to css?? - Again, this is ONLY on some sites - weird

It should look like this (with styles showing on the right relating to css)

BUT......instead, on SOME of our sites, this just started a couple of weeks ago looking like this....with no css showing in the styles tab:

NOTE: it has worked for 2 years - The page looks fine and all styles are being applied to the DOM, but do NOT show up in the styles tab when inspecting element.

Any ideas??

Answer 1

I just had this same issue and to resolve it I went into Chrome Developer Tools -> Settings -> Scroll to the bottom and click "Restore defaults and reload" then it all magically came back!

I hadn't changed anything between it working and when it stopped so not sure why it broke but hopefully this helps you too.

Answer 2

I just close the tab, and reopen it, and then right click > inspect element. Don't need to restore the whole dev tools to default settings. It's a waste. Try it, it works! :)

Answer 3

I had to go to Chrome Developer Tools -> Settings -> Enable JavaScript source maps and then disable that checkbox. It has probably got do with sourcemaps and the fact that I'm building the scss to css.