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

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

Answer 3

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.

Answer 4

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/

Answer 5

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 6

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