谷歌 Chrome 开发工具检查没有显示的元素样式

从几个星期前开始... ... 在我们的一些网站上，但不是全部，当检查一个元素时，样式标签只显示“样式框”，而不是与 CSS 相关的实际样式？- 再说一次，这是 仅此而已在一些网站上的-奇怪

它应该看起来像这样 (右侧显示与 css 相关的样式)

correct styles tab

但是 ... ... 相反，在我们网站的 一些上，这是几个星期前才开始的，看起来像这样... ... 样式标签页中没有显示 css:

incorrect styles tab

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

有什么想法吗？

66747 次浏览
小开

我也有同样的问题。我不是100% 确定是什么触发了这种情况的发生，但是我们使用构建工具将 SCSS 构建成 CSS。我进入我的 CSS 文件并删除了源映射引用-

/*# sourceMappingURL=myCSS.map */

突然间它又出现了。然后我把它加回去，我还能看到它。我不确定这是否是因为现在缓存了地图的一个版本，但这对我很有用。

小开

我必须打开 Chrome Developer Tools -> Settings -> Enable JavaScript source maps然后关闭那个复选框。它可能与源地图有关，事实上，我正在构建 scss到 css。

小开

我只是有同样的问题，并解决它，我进入 Chrome 开发工具-> 设置-> 滚动到底部，点击“恢复默认值并重新加载”然后它所有神奇地回来了！

我没有改变任何东西之间的工作，当它停止所以不知道为什么它打破了，但希望这对你也有帮助。

小开

对我有用的东西: chrome: 标志 > 启用开发人员工具实验 > 禁用。我在某个时候启用了它，使用它多年的 w/o 问题，然后不能看到任何 OP 描述的样式细节。在更新之后，重置 devtools 更喜欢默认设置，甚至尝试隐身，这似乎是让它重新工作的唯一方法。有一些精巧的实验，但我更愿意做我的工作..。

小开

我只是关闭选项卡，然后重新打开它，然后右键单击“检查元素”。不需要将整个开发工具恢复到默认设置。真是浪费。试试，有用！:)

小开

即使我面对这个问题! ! ！

Css 文件导致了这个问题. 。

我刚刚创建了一个新的 css 文件(Ex: style1.css) ，并将旧的 css 文件内容(style.css 中的所有行)剪切到 style1.css 文件中。有用

注意: 不要忘记更新链接标记，这是加载 css 文件。

小开

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

应该是这样的

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

如果您跳过 rel = “ stylesheet”，浏览器可能会认为它是一个普通文件。要确认样式表的加载，请使用 浏览器检视器-> 资料来源

检查网站资源

没有必要重置任何东西。希望它有所帮助:)

小开

我也面临着这个问题，除了其他用户让我访问的建议:

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

图像说明过程

小开

我用的是织梦者和布雷克特。 可以看出问题只发生在我使用“织梦者”的时候。 通过改变“织梦者”的偏好解决了这个问题

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

小开

我认为这可能有帮助. . 如果它是一个有棱角的项目 > 然后简单地运行

Ng 服务—— Exact-css。

小开

在 CSS 文件中寻找错误，在我的案例中是全局 CSS 变量，修复错误解决了问题。

这个工具可以帮助您找到错误: Https://jigsaw.w3.org/css-validator/

小开

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

使用链中缺少的变量的元素根本不会出现在 chrome 中(在我的站点中，它隐藏了所有对 h2s 的引用)。

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

小开

有时它可以是服务器！

我只是在一个页面上有这个错误，似乎是完全加载，但样式面板是完全空的。

完全重启 Chrome (并且不验证任何进程)不起作用。

重新启动服务器(在本例中为。NET 核心应用程序在 VisualStudio 中本地运行) ，然后允许显示样式面板。

我认为有一些连接泄漏或网络插座限制-这种性质的东西是困惑的 Chrome。


提交答案