检查包含 kendo-ui 样式的页面中的元素时，Google Chrome Devtools 崩溃

Posted 2023-05-07

【中文标题】检查包含 kendo-ui 样式的页面中的元素时，Google Chrome Devtools 崩溃

【英文标题】：Google Chrome Devtools crashes when inspecting element in page containing kendo-ui styles

【发布时间】：2016-05-17 07:12:51

【问题描述】：

从几周前开始，我就遇到了 Chrome 开发者工具崩溃的问题。每当检查页面上的元素时，我都会收到“Aw，Snap！”错误页面，并且 devTools 面板上的消息显示“DevTools 已与页面断开连接”。在阅读 This 帖子后，我设法隔离了导致错误的 css 文件。原来是一个 kendo-ui css 文件/Content/kendo/2015.2.902/kendo.silver.min.css。注释掉文件时，devTools 工作正常，我可以检查元素。

我在CSS Validator 中运行这个文件，它给了我6 个错误（如Unknown pseudo-element or pseudo-class ::selection [selection] 和Too many values or values are not recognized : inset 0 0 0 1px inset 0 0 3px 1px #bebec3）和116 个警告（如Property none,-webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, 0.45)),to(rgba(255, 255, 255, 0))) is an unknown vendor extension 和Property -webkit-box-shadow is an unknown vendor extension）

我有几个使用 kendo-ui 的项目，删除它们不是一个选项，也不能修改 kendo 的 css 文件，我也不想停止使用心爱的 Chrome devTools。

我的 Chrome 版本是 48.0.2564.103 m。 我已经尝试调整 devTools 的设置，也许可以让它不那么严格，但没有运气。

任何想法如何解决这个问题？

更新 1

我试了一下，修改了kendo.silver.min.css文件，并删除了在css-validator发现的所有错误（仍然有115个警告，但删除它们与根本不加载文件相同）。 css 验证正常。使用修改后的文件再次运行应用程序没有结果，并且 devtools 在检查元素时不断崩溃。在检查作为 Kendo 控件的子元素（例如网格、标签条等）时，它似乎很糟糕，但对于独立元素，即使它们有 k-... css 类，不是。 p>

可以在kendo ui demos site itsef 复制此问题。当右键单击网格中的一个按钮并尝试 Inspect 时。

【问题讨论】：

有几件事要尝试。 1. 看来你重组了硬盘上的剑道库。我知道 Kendo 过去常常在特定位置查找这些文件，因此您可以尝试将它们安排回安装它们时的状态。 2. 你正在运行一个大约一年前的版本。如果可能的话，如果我发现无法解决的问题，我总是会尝试更新到最新版本。

@Ageonix，剑道库以安装程序放置它们的方式放置在我的 mvc 项目中。你是什​​么意思安排他们回来？至于更新到最新版本，我不能，因为我的许可证去年到期了。我认为这并不重要，因为它是一个稳定的版本。

各位，这个问题与最新版本的 Chrome 有关 - 我们在上次更新后也开始遇到它。我建议将此问题直接报告给 Chrome（例如：support.google.com/chrome/answer/95315?hl=en）。 Chrome DevTools 也不允许我们在某些行设置断点，我不得不使用 firefox 进行调试，直到这个问题得到解决（我们每天都在大量调试 DOM / CSS / javascript）。

@Issac 在 Linux 上的 Chrome Dev 频道中对我来说似乎工作正常。这是截图imgur.com/WgWwJXT

您可以查看当前的测试版 (google.com/chrome/browser/beta.html) 吗？

【参考方案1】：

在当前的 chrome 稳定版本 (48) 中已知 issue。它已修复并合并到 chrome 49。 请在 Chrome 49 稳定之前使用beta。