Google Chrome开发工具检查不显示的元素样式

几个星期前开始….在我们的一些网站,但不是全部,当检查一个元素时,样式选项卡只显示“样式框”,但不是实际的样式与CSS有关? – 再一次,这只是在一些网站 – 奇怪

它应该看起来像这样 (样式显示在与CSS有关的权利)

正确的样式标签

但是 ……相反,在我们的一些网站上,这几个星期前刚开始看起来像这样….样式选项卡中没有显示CSS:

不正确的样式标签

注意:它已经工作了2年 – 页面看起来很好,所有样式都被应用到DOM,但是在检查元素时不会显示在样式选项卡中。

有任何想法吗??

我只是有这个相同的问题,并解决它我进入了Chrome开发工具 – >设置 – >滚动到底部,然后单击“恢复默认值和重新加载”,然后它神奇地回来了!

我没有改变它之间的任何工作,当它停止,所以不知道为什么它坏了,但希望这也可以帮助你。

我只需closures该选项卡,然后重新打开它,然后右键单击>检查元素。 不需要将整个开发工具恢复到默认设置。 这是浪费。 试试吧,它的工作原理! 🙂

我不得不去Chrome Developer Tools -> Settings -> Enable JavaScript source maps ,然后禁用该checkbox。 它可能已经做了源代码和事实,我正在build立的css

这对我有效:chrome:flags>启用开发者工具实验>禁用。 我已经在某个时候启用了它,使用了它几年没有问题,然后看到OP描述任何样式的细节。 更新后,将devtools prefs重置为默认值,甚至尝试隐身,这似乎是一个似乎得到它再次工作的东西。 有一些整洁的实验,但我宁愿能够做我的工作…

即使我面对这个问题!

style.css文件是造成这个问题..

我刚刚创build了一个新的css文件(例如:style1.css),并将旧的css文件内容(style.css中的所有行)粘贴到style1.css文件中。 有用

注意:不要忘记更新链接标签,这是加载CSS文件。

我只是有一个奇怪的问题。 我不是100%确定是什么引发了这种情况,但我们使用构build工具将SCSS构build到CSS中。 我进入我的CSS文件,并删除源地图参考 –

 /*# sourceMappingURL=myCSS.map */ 

突然之间,它又开始出现了。 然后我加回来,我仍然可以看到它。 我不知道这是否是因为地图的一个版本现在被caching,但这对我有效。

我认为你的CSS文件没有正确加载。 只需检查引用外部样式表的语法。

应该是这样的

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

如果你跳过rel =“样式表”,浏览器可能会认为它是一个纯文件。 要确认样式表的加载,请使用Chrome Inspector – > Sources

检查网站资源

不需要重新设置任何东西。 希望能帮助到你 :)

我也遇到了这个问题,除了其他用户使我访问的build议:

Chrome开发者工具 – > CSS – >链接样式表

图片说明了程序

我使用Dreamweaver和Breckets。 只有当我使用Dreamweaver时,才能看到问题的发生。 通过更改Dreamweaver的偏好解决了这个问题

– >代码格式 – >换行符types – > CR LF(Windows)