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

Question

几个星期前开始....在我们的一些网站上，但不是全部，在检查元素时，样式选项卡仅显示＆＃34;样式框＆＃34;，而不是相关的实际样式去css ?? - 同样，在某些网站上仅 - 很奇怪

看起来应该是这样的（右侧显示与css相关的样式）

但是 ......相反，在我们网站的 SOME 上，这几周刚开始看起来像这样....没有css显示在样式选项卡中：

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

任何想法??

Answer 1

我刚才遇到了同样的问题，为了解决这个问题，我进入了 Chrome开发者工具 - ＆gt;设置 - ＆gt;滚动到底部，然后点击“恢复默认设置并重新加载”然后全部神奇地回来了！

我没有改变工作和停止之间的任何事情所以不确定它为什么会破坏但希望这对你也有帮助。

Answer 2

我必须转到Chrome Developer Tools -> Settings -> Enable JavaScript source maps，然后停用该复选框。它可能与源图有关，而且我正在构建scss到css。

Answer 3

对我有用的东西：chrome：flags＆gt;启用开发者工具实验＆gt;禁用。我已经在某个时候启用它，使用它多年没有问题，然后看不到OP描述的任何样式细节。更新后，将devtools prefs重置为默认值，即使尝试隐身，这也是让它再次运行的一件事。有一些整洁的实验，但我更愿意做我的工作......

Answer 4

即使我遇到这个问题!!!

style.css文件导致此问题..

我刚刚创建了一个新的css文件（例如：style1.css），并将旧的css文件内容（style.css中的所有行）粘贴到style1.css文件中。它的工作原理

注意：不要忘记更新正在加载css文件的链接标记。

Answer 5

我只是有同样的奇怪问题。我不是100％确定触发这种情况的原因，但是我们使用构建工具将SCSS构建到CSS中。我进入了我的CSS文件并删除了源地图引用 -

/*# sourceMappingURL=myCSS.map */

突然之间它再次出现了。然后我把它加回去，我仍然可以看到它。我不确定这是因为现在是否缓存了地图版本，但这对我有用。

Answer 6

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

应该是这样的

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

如果要跳过rel =“stylesheet”，浏览器可能会将其视为普通文件。要确认加载样式表，请转到 Chrome Inspector - ＆gt;的 来源

Check the site resources

无需重置任何内容。希望它有所帮助：）

Answer 7

我还遇到了这个问题，除了其他用户让我访问的建议：

Chrome开发者工具 - ＆gt; CSS - ＆gt; Relaoad Linked Style Sheets

Image Ilustrating the procedure

Answer 8

我使用Dreamweaver和Breckets。 可以看到问题仅在我使用Dreamweaver时发生。 通过更改Dreamweaver的首选项来解决问题

- ＆GT;代码格式 - ＆gt;换行符类型 - ＆gt; CR LF（Windows）

Answer 9

在CSS文件中查找错误，以我为例，该错误位于全局CSS变量上，解决了错误即可解决问题。

此工具可以帮助您发现错误： https://jigsaw.w3.org/css-validator/

Answer 10

另一个用于混合的变量-使用CSS变量，但是其中一个变量引用了另一个不存在的变量。

在链中使用该缺失变量的元素根本不会显示铬（在我的站点中，它隐藏了对h2的所有引用）。

有趣的是，它仍然在Firefox的开发工具面板中显示了元素。

Answer 11

我认为这可能会有所帮助。如果它是一个有角度的项目，则只需运行

  

ng服务--extract-css。