你可以在 Chrome Inspector 中添加新的 CSS 属性吗？

Posted 2023-03-06

【中文标题】你可以在 Chrome Inspector 中添加新的 CSS 属性吗？

【英文标题】：Can you add new CSS properties in Chrome Inspector?

【发布时间】：2011-10-03 10:48:19

【问题描述】：

是否可以在 Chrome 检查器中添加新的 CSS 属性？您似乎只能编辑现有属性。

另外，一旦你编辑了属性，有没有办法将修改后的 CSS 作为一个整体来查看？

【参考方案1】：

为什么不呢？这是 Google Chrome 检查器Styles 面板的屏幕截图

注意块：

element.style 

您只需在该区域单击鼠标，检查器将为您提供添加新样式的机会。如果您需要为元素添加新属性，请在Elements 面板中右键单击它并选择“添加属性”。

另外，一旦你编辑了属性，有没有办法将修改后的 CSS 作为一个整体来查看？

Computed Style 面板没有给你这个信息吗？在那里，您可以检查应用于节点的所有样式，实际上，可以检查它们应用的规则和样式表。

【参考方案2】：

是否可以在 Chrome 检查器中添加新的 CSS 属性？它 看来您只能编辑现有属性...

只需双击“样式”面板中的任何空白区域。

我倾向于双击 右侧的任何我想要编辑的 CSS 规则。

另外，一旦你编辑了属性，有没有办法查看修改后的 整个 CSS？

见@Sotiris's answer。

我不知道。

可能有一个扩展可以做到这一点，但如果存在，它可能不会保留原始 CSS 的确切格式。

【讨论】：

你可能每年为我节省了 17 个小时 - 我从没想过要点击关闭 。我倾向于双击最后一个属性，然后按 Tab 键创建一个新属性。

【参考方案3】：

您可以在规则内双击添加新属性。您也可以从角落的***中添加新规则，然后选择“新样式规则”。

要查看整个修改后的文档，请访问：Resources > Frame > site name > Stylesheets > stylesheet-name.css

或者直接点击css属性上方的+号

【讨论】：

没有“资源”标签

【参考方案4】：

是的，可以在 Chrome 检查器中添加新的 CSS 属性并通过几个简单的步骤对其进行查看：

右键单击要更改的元素并选择“检查元素”； 点击“新建样式规则”按钮（下图中的1）； Google Chrome 会分配一个 CSS 匹配规则，您可以重命名（下图中的 2 个）； 添加您的 CSS 规则（下图中的 2 个）； 完成后，只需检查“Computed Style”窗格（下图中的 3）。

【讨论】：

一点小事，但有很大的帮助......没有人注意到它......很好