我曾经遇到过同样的问题，为了解决它，我进入了 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感到困惑。