google-chrome-devtools - 忽略 Chrome 开发工具中的“未知属性值”

Question

如果您使用大量供应商前缀并且具有长属性值，Chrome 的开发工具将变得几乎无法使用......

有没有办法告诉开发工具不要显示“未知属性值”（例如带有三角形的那些）？

Answer 1

您可能不想完全隐藏所有无法识别的样式属性，因为这样很容易意外忽略错误。

您可以通过自定义用户样式自定义开发人员工具（它不是扩展）。

首先找到您的个人资料目录，然后进入User StyleSheets子目录。您会找到一个名为Custom.css. 编辑此文件，并添加以下内容：

编辑：自定义用户样式已从 Chromium 中删除。要更改开发人员工具的外观，chrome.devtools.panels.applyStyleSheet可以使用新方法（示例代码）。

#-webkit-web-inspector .properties > .not-parsed-ok:not(.child-editing):not(:hover) {
    white-space: pre;
}

这个 CSS 选择器选择所有无效的 CSS 属性-值对，并将所有内容强制放在单行上，除非您正在编辑它，或者将鼠标悬停在它上面。如果您真的想隐藏样式，请使用display:none;.
由于上面给出的原因，我会使用其他东西，例如max-height: 8px; background-color: rgba(0,0,0,0.5);代替display:none;隐藏属性。然后，您仍然可以看到不正确的属性存在，而无需过多打扰。

另一种风格是默认隐藏所有属性，并且仅当鼠标位于 CSS 声明上时才显示隐藏的属性：

#-webkit-web-inspector .properties:not(:hover) > .not-parsed-ok:not(.child-editing) {
    display: none;
}

Answer 2

无条件地隐藏这些会让你走上一条湿滑的道路。考虑一下自己添加了一个属性，并无意中在属性名称 ( ) 或值 ( )中删除了一个字符（这些拼写错误是有原因的，请勿编辑！）。这个属性会立即消失，并且您将无法恢复它（通过编辑 CSS 模型），但这个损坏的属性将永远保留在样式表文本中。这就是我们不隐藏它们的原因。background-colrrb(128,120,120)