Google Chrome Dev Tools Validate Styles of Items That Don't Display

Question

Starting a couple of weeks ago .... on some of our sites, but not all, when checking an item, does the styles tab show only the “style box”, but not the actual styles related to css? - Again, this is ONLY on some sites - strange

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

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

NOTE: he worked for 2 years. The page looks great, and all styles apply to the DOM, but do not appear on the styles tab when checking an element.

Any ideas?

Answer 1

I had the same problem, and to solve it, I went into Chrome Developer Tools → Settings → Scroll down and click "Restore defaults and restart" , after which it all magically returned!

I didn’t change anything when I was working and when he stopped, so I’m not sure why it broke, but I hope this helps too.

Answer 2

I just close the tab and open it again, and then right-click> check the item. No need to restore all developer tools to default. This is a waste. Try it, it works! :)

Answer 3

I needed to go to Chrome Developer Tools -> Settings -> Enable JavaScript source maps , and then disable this checkbox. This is probably due to the source files and the fact that I create scss before css .

Answer 4

Something that worked for me: chrome: flags> Enable Developer Tools tests> Disable. I turned it on at some point, used it for many years without release, and then could not see the style details described by the OP. After the upgrade, resetting prefs to devtools by default, even trying incognito, was the only thing that seemed to make it work again. There were some neat experiments, but I would probably be able to do my job ...

Answer 5

Even I ran into this problem !!!

The style.css file caused this problem.

I just created a new css file (Ex: style1.css) and cut out the insert of the old contents of the css file (all lines in style.css) into the style1.css file. he works

Note. Remember to update the link tag that downloads the css file.

Answer 6

I had the same strange problem. I am not 100% sure what caused this, but we use build tools to create SCSS in CSS. I went into my CSS file and deleted the link to the original map -

 /*# sourceMappingURL=myCSS.map */ 

And all this suddenly began to appear again. Then I added it back, and I still see it. I'm not sure if this is because the card is now cached or not, but it worked for me.

Answer 7

I think your CSS files are not loaded correctly. Just check the syntax of the link to external style sheets.

It should be like

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

If you skip rel = "stylesheet", the browser may consider this a simple file. To confirm the loading of style sheets, select Chrome inspector → Sources

Check site resources

No need to reboot anything. Hope this helps :)

Answer 8

I also had to face this problem, in addition to the suggestions that other users made available to me:

Chrome Developer Tools -> CSS -> Drag Related Style Sheets

Image Illustrating Procedure

Answer 9

I use Dreamweaver and Breckets. Perhaps the problem only occurred when I used Dreamweaver. Solved the problem by changing the settings for Dreamweaver.

-> Code format → Line break type → CR LF (Windows)