忽略＆＃39;未知的财产价值＆＃39;在Chrome开发工具中

Question

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

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

Answer 1

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

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

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

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

#-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

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