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 rela

Answer 1

I think this may helpfull.. If it is an angular project > then simply run

ng serve --extract-css.

Answer 2

I was just having the same odd issue. I'm not 100% sure what triggered this to happen but we use build tools to build SCSS into CSS. I went into my CSS file and removed the source map reference -

/*# sourceMappingURL=myCSS.map */

And all of the sudden it started showing up again. Then I added it back and I can still see it. I am not sure if this is because a version of the map is cached now or not but this worked for me.

Answer 3

Even i faced this issue !!!

style.css file was causing this issue..

I just created a new css file (Ex: style1.css) and cut pasted the older css file content (all lines in style.css) to style1.css file. It works

Note: Don't forget to update link tag, which is loading css file.

Answer 4

I use Dreamweaver and Breckets. Could see that the problem occurred only when I used Dreamweaver. Solved the problem by changing Dreamweaver's preferences

--> Code Format --> Line Break Type --> CR LF (Windows)

Answer 5

something that worked for me: chrome:flags>Enable Developer Tools experiments>Disable. I had enabled it at some point, used it for years w/o issue, then could not see any style details as OP described. After updating, resetting devtools prefs to default, even trying incognito, this was the one thing that seemed to get it working again. There were some neat experiments, but i'd much rather be able to do my job...

Answer 6

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.