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

【问题标题】：How debug placeholder pseudo element in firefox?如何在firefox中调试占位符伪元素？
【发布时间】：2019-05-27 20:32:21
【问题描述】：

我有这样的 CSS 代码：

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

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

【问题讨论】：

您希望按照 Show User Agent CSS (for firebug) 的方式进行查看，尽管每个浏览器/DOM 检查工具都不同。如果我今天有时间，我会写一个完整的答案。
这听起来像您使用内置的 Firefox 检查工具。所以你想去 Inspect Element (Q) > Computed > 勾选底部的 'Browser styles' 框

【解决方案1】：

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

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

Firefox 检查器

Chrome 开发工具

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

【讨论】：

如果您继续解释在 Firbug 和/或 Chrome 工具中找到占位符的位置，这个答案会更好。
在 Chrome 中，您可以通过上图中的齿轮（或接近）切换 shado dom。这将打开设置并有一个“显示 Shadow Dom”选项，检查并刷新页面以查看 shadow DOM。
伪元素不同于伪类。根据规范：“'::' 开始一个伪元素，':' 一个伪类”（dev.w3.org/csswg/selectors-4）
似乎伪类现在通过右键单击元素显示在 Firefox 的内置工具中（并且伪元素现在似乎显示在它们自己的部分中）。

【解决方案2】：

只是为了给仍在访问此页面的任何人提供更新的答案，在 FireFox v66 中，您可以通过在开发人员工具中检查元素时单击样式面板中的展开图标来显示伪元素样式 - 参见屏幕截图：

【讨论】：

【解决方案3】：

之后，您将能够单击伪元素 :before 和 :after 并查看它们的样式。不知道为什么这个被禁用，在 Chrome 中默认工作。

来自link

【讨论】：

我在 Firefox 中看不到那个配置键；对我来说，唯一一个名字中有 webcomponents 的是dom.webcomponents.shadowdom.report_usage