如何在firefox中调试占位符伪元素？

Question

我有这样的CSS代码：

:-moz-placeholder,::-moz-placeholder {
    color:    #999;
    /*some additional font styling*/
}

我可以点击“Inspect element”并查看有关元素的所有样式信息。但是我可以在哪里看到已应用于元素占位符的所有CSS规则？

Answer 1

占位符是一个伪元素，如:: before和:: after（https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements）有时称为伪类（https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes）

Firefox Inspector中无法看到这些类型的元素，至少需要Firebug或Chrome Dev Tools，但最近它也可以在Firefox Inspector中使用。它们是“影子dom”的一部分（极其简单的描述：浏览器在其他元素内部创建的元素）。

您应该能够在输入或textarea元素内的dom检查器中找到占位符，例如选择一个输入元素，然后从右键菜单中选择“inspect element”，然后你会看到类似的东西：

Firefox Inspector

Chrome开发者工具

对于Chrome，您可能需要在开发工具设置中启用“显示用户代理影子DOM”。

Answer 2

1. 在地址栏中，转到：about：config
2. 搜索属性：dom.webcomponents.enabled并将其标记为true。
3. 如果您已经在开发页面上，请记得重新加载它。

之后你就可以点击伪元素了：之前和之后：之后，看看他们的风格。 不确定为什么禁用此功能，默认情况下Chrome中有效。

从此link

Answer 3

在FireFox v66中，只要为仍要访问此页面的任何人提供更新的答案，就可以在开发人员工具中检查元素时，只需单击样式面板中的展开图标，即可显示伪元素样式。 ：