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??

Reputation: 925

Google Chrome Dev Tools inspect element styles not showing

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)

correct styles tab

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:

incorrect 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??

Upvotes: 87

Answers (13)

Simon_Weaver

Reputation: 145880

Sometimes it can be the server!

I just had this error on a page that appeared to be fully loaded but the style panel was completely empty.

A complete restart of Chrome (and verifying no processes) did not work.

Restarting my server (in this case a .NET Core app running locally in Visual Studio) then allowed the style panel to show.

I think there was some sort of connection leak or web socket limit - something of that nature which was confusing Chrome.

Upvotes: 0

Wellington

Reputation: 307

Look for errors in the CSS file, in my in my case it was on the global CSS variables, fixing the errors solved the problem.

This tool can help you find the errors: https://jigsaw.w3.org/css-validator/

Upvotes: 1

Steve de Niese

Reputation: 984

Another one for the mix - using CSS variables but one of the variables was referencing another variable that didn't exist.

Elements using that missing variable in the chain just don't show up in chromium at all (it hid all references to h2s in the case of my site).

Interestingly, it still shows the elements in Firefox's dev tool panel.

Upvotes: 1

Badri Bashipangu

Reputation: 11

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

ng serve --extract-css.

Upvotes: -1

Steen Hjalmar Larsen

Reputation: 1

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)

Upvotes: 0

Romeu

Reputation: 11

I was also facing this problem, in addition to the suggestions the other users made it worked for me accessing:

Chrome Developer Tools -> CSS -> Relaoad Linked Style Sheets

Image Ilustrating the procedure

Upvotes: 1

Naren Yellavula

Reputation: 7663

I think your CSS files are not loaded properly. Just check the syntax for referencing the external stylesheets.

It should be like this

<link rel="stylesheet" type="text/css" href="mystyle.css">

If you are skipping the rel="stylesheet", browser may think it as a plain file. To confirm the loading of stylesheets go for Chrome Inspector -> Sources

Check the site resources

No need of resetting anything. Hope it helps :)

Upvotes: 0

Ganapati prasad

Reputation: 39

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.

Upvotes: 0

pilau

Reputation: 6723

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! :)

Upvotes: 23

dandavis

Reputation: 16726

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

Upvotes: 2

Andrea Black

Reputation: 1107

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.

Upvotes: 109

Pratik Mandrekar

Reputation: 9568

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.

Upvotes: 6

PW Kad

Reputation: 14995

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.

Upvotes: 0

Google Chrome Dev Tools inspect element styles not showing

Answers (13)

Sometimes it can be the server!

Related Questions