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

Posted 2023-03-06

【中文标题】Google Chrome 开发工具检查未显示的元素样式

【英文标题】：Google Chrome Dev Tools inspect element styles not showing

【发布时间】：2015-01-29 16:52:11

【问题描述】：

从几周前开始......在我们的一些网站上，但不是全部，当检查一个元素时，样式选项卡只显示“样式框”，而不是与 css 相关的实际样式？ - 同样，这仅在某些网站上 - 很奇怪

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

但是......相反，在我们的某些网站上，这只是几周前才开始的，看起来像这样......没有CSS显示在样式选项卡中：

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

有什么想法吗？？

【问题讨论】：

检查一次并确认您正在检查的类或 id 是否存在于加载的 CSS 文件或内部样式中。

它是 - 再说一次，我们的网站没有什么是“新的” - 它已经工作了 2 年 - 页面看起来很好，所有样式都应用于 DOM....他们只是不'不再显示在样式选项卡上

那真的很奇怪。

它发生在每个网站上。有些网站显示样式，有些则不显示。很好的重置开发者工具。

你有想过这个吗？我已经阅读了所有建议的答案，但没有一个有效。奇怪的是它只发生在 Chrome Canary 中

【参考方案1】：

我刚刚遇到了同样的问题，为了解决它，我进入了 Chrome 开发者工具 -> 设置 -> 滚动到底部并点击“恢复默认值并重新加载”，然后一切都神奇地恢复了！

在它工作和停止之间我没有改变任何东西，所以不确定它为什么坏了，但希望这对你也有帮助。

【讨论】：

这个答案仍然有效。感谢您提供信息和指南，以便解决此问题

也帮助了我！我刚刚在 Chrome 中创建了一个新的“Person”，以便能够禁用所有插件......从一开始，Styles 是不可见的。恢复默认设置，它就在那里。有趣的是，在我使用默认用户的另一个浏览器窗口中，它一直都在那里。

【参考方案2】：

我只是关闭选项卡，然后重新打开它，然后右键单击 > 检查元素。不需要将整个开发工具恢复为默认设置。这是一种浪费。试试看，它有效！ :)

【讨论】：

也为我工作 - 不敢相信这不是一个相当合乎逻辑、明智的技术会做的第一件事，但在这里我浏览的是 SE 而不是仅仅“关闭该死的东西然后再次“我想”

使用此解决方案，您甚至不必丢失所有设置。

这有时只有效一次，但很快问题又出现在我身上。使用 Chrome 版本 54.0.2840.71（64 位）

@EduardoChongkan 对我来说，它一直有效，但感谢您的更新！

有不同的问题。有时按 F12 两次（没有关闭标签）就足够了......

【参考方案3】：

我必须转到Chrome Developer Tools -> Settings -> Enable javascript source maps，然后禁用该复选框。这可能与源映射以及我正在构建 scss 到 css 的事实有关。

【讨论】：

这对我有问题的本地网站有用，谢谢！

【参考方案4】：

对我有用的东西：chrome:flags>启用开发者工具实验>禁用。我在某个时候启用了它，使用它多年没有问题，然后看不到 OP 描述的任何样式细节。更新后，将 devtools 首选项重置为默认值，甚至尝试隐身，这似乎是让它再次工作的一件事。有一些巧妙的实验，但我宁愿能够完成我的工作......

【参考方案5】：

除了其他用户提出的建议，我也遇到了这个问题：

Chrome 开发者工具 -> CSS -> 重新加载链接样式表

Image Ilustrating the procedure

【参考方案6】：

我只是遇到了同样奇怪的问题。我不是 100% 确定是什么触发了这种情况，但我们使用构建工具将 SCSS 构建到 CSS 中。我进入了我的 CSS 文件并删除了源映射参考 -

/*# sourceMappingURL=myCSS.map */

突然之间，它又开始出现了。然后我把它加回来，我仍然可以看到它。我不确定这是否是因为现在缓存了某个版本的地图，但这对我有用。

【参考方案7】：

即使我也遇到过这个问题！！！

style.css 文件导致了这个问题..

我刚刚创建了一个新的 css 文件（例如：style1.css）并将旧 css 文件内容（style.css 中的所有行）剪切粘贴到 style1.css 文件中。有效

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

【参考方案8】：

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

应该是这样的

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

如果您跳过 rel="stylesheet"，浏览器可能会将其视为纯文件。要确认样式表的加载，请转到 Chrome Inspector -> Sources

Check the site resources

无需重置任何东西。希望对你有帮助:)

【参考方案9】：

我使用 Dreamweaver 和 Breckets。 可以看出，只有在我使用 Dreamweaver 时才会出现问题。 通过更改 Dreamweaver 的首选项解决了问题

--> 代码格式--> 换行类型--> CR LF (Windows)

【参考方案10】：

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

在链中使用该缺失变量的元素根本不会出现在 chromium 中（在我的网站中，它隐藏了对 h2s 的所有引用）。

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

【参考方案11】：

在 CSS 文件中查找错误，就我而言，它是在全局 CSS 变量上，修复错误解决了问题。

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

【讨论】：

能否更具体地说明您是如何解决问题的？

【参考方案12】：

我认为这可能会有所帮助.. 如果它是一个角度项目 > 然后只需运行

ng 服务 --extract-css。