应该像这样(右侧显示与CSS相关的样式)。
但是......相反,在我们的一些站点上,这种情况刚刚在几周前开始出现,看起来像这样... 样式选项卡中没有显示CSS:
注意:它已经运行了2年 - 页面看起来很好,所有样式都被应用到DOM上,但是在检查元素时不显示在样式选项卡中。
有任何想法吗?
我曾经遇到过同样的问题,为了解决它,我进入了 Chrome 开发者工具 -> 设置 -> 滚动到底部并点击 "恢复默认值并重新加载" ,然后一切都神奇地恢复了!
在它正常工作和停止之间,我没有更改任何内容,因此不确定为什么会出现问题,但希望这也能帮助到您。
我只是关闭了标签页,然后重新打开它,接着右键点击 > 检查元素。不需要将整个开发者工具还原为默认设置,太浪费时间了。你可以试一试,它能够正常使用! :)
我需要前往 Chrome开发者工具 -> 设置 -> 启用JavaScript源映射
,然后取消该复选框。这可能与源映射有关,也可能与我正在将 scss
转换为 css
有关。
以下是我使用的有效方法:在chrome:flags中找到“启用开发者工具实验”选项并将其禁用。我曾经启用过它,多年来一直没有问题,但是最近却无法像OP描述的那样查看任何样式细节。即使更新、重置devtools偏好设置为默认值,甚至尝试使用无痕模式,这似乎是唯一能让它再次正常工作的方法。虽然有一些很棒的实验,但我更愿意能够完成我的工作...
混合使用CSS变量时,其中一个变量引用了另一个不存在的变量。
在这个链条中使用了缺失变量的元素在Chromium中根本不显示(在我的网站上隐藏了所有对h2的引用)。
有趣的是,在Firefox的开发工具面板中仍然显示这些元素。
我也遇到了同样奇怪的问题。我不确定是什么导致了这种情况,但我们使用构建工具将SCSS编译成CSS。我进入了我的CSS文件并删除了源映射引用 -
/*# sourceMappingURL=myCSS.map */
突然它又出现了。然后我把它重新添加回去,现在我仍然可以看到它。不确定现在是否因为地图的某个版本已被缓存而导致这种情况,但对我而言,这是可行的。
我也遇到了这个问题!!!
style.css 文件导致了这个问题。
我只是创建了一个新的css文件(例如:style1.css),然后将旧的css文件内容(style.css中的所有行)剪切并粘贴到style1.css文件中。它有效了。
注意:不要忘记更新加载 css 文件的链接标记。
我刚刚在一个页面上遇到了这个错误,页面看起来已经完全加载完成,但样式面板却完全为空。
重新启动Chrome(并验证没有任何进程)也没有解决问题。
然后我重启了我的服务器(在这种情况下是在Visual Studio中本地运行的.NET Core应用程序),这样样式面板就可以显示了。
我认为这可能是一些连接泄漏或Web套接字限制之类的问题,这使得Chrome感到困惑。