我如何检查和调整：在浏览器中的伪元素之前和之后？

Question

我创建了一些相当复杂的DOM元素，其中包含：after伪元素，我希望能够在Chrome Inspector或Firebug或同等版本中检查和调整它们。

尽管this WebKit/Safari blog post（日期为2010年）中提到了此功能，但我无法在Chrome或Safari中找到此功能。 Chrome确实至少有要检查的复选框：hover，：visited和：active状态，但是：before和：after无处可见。

此外，this blog post（日期为2009年！）提到IE开发工具中存在此功能，但我目前正在使用Mac OS，所以这对我没有帮助。此外，IE不是我主要针对的浏览器。

有没有办法检查这些伪元素？

编辑：除了Firebug无法检查这些元素的错误之外，我发现Opera在检查时非常擅长：在开始之前和之后的元素。

Answer 1

在Chrome's Dev tools中，伪元素的样式在面板中可见：

否则，您还可以在JavaScript控制台中输入以下行，并检查返回的CSSStyleDeclaration对象：

getComputedStyle(document.querySelector('html > body'), ':before');

• window.getComputedStyle
• document.querySelector

Answer 2

从Chrome 31开始，伪元素在元素面板中显示为其父元素的子元素，如下图所示：

您可以像普通元素一样选择它们，但如果删除content样式，则也会删除伪元素，并且devtools焦点将更改为它的父级。

似乎继承的CSS样式不可见，您无法从元素面板编辑CSS内容。

Answer 3

Chrome将不会显示：在DOM树中的之前和之后的伪元素，如果它们错过了“内容”属性。它应该被设置，即使它被设置为空。

这不会显示：

:after {
  background-color: red;
}

这将显示在检查员中：

:after {
  content: "";   
  background-color: red;    
}

希望它有所帮助。

Answer 4

经过很多挫折之后，我发现firefox并没有在文档树中显示伪元素，但如果你选择完全如果元素定义了伪元素，那么其伪元素的样式将显示在右侧的样式规则部分中。对于萤火虫和内置检查都是如此（＆＃34; Q＆＃34;），我感到震惊，没有人愿意在此之前解释清楚。

显然，chrome / chromium对伪元素的处理非常优越，因为它们可以选择（在文档树中和直接在页面上）并且像常规元素一样进行检查，具有布局，属性和一切否则，独立于他们的＆＃34;所有者＆＃34;。

我目前正在使用的浏览器版本：Chromium 40.0.2214.91，Firefox 31.3.0。

Answer 5

Firefox现在已经有了这个功能，只需右键单击“检查元素”，然后在检查器右侧面板中查看前后元素。

Answer 6

至少从Chrome 62开始，DevTools中有一个设置为“显示用户代理阴影DOM”，该设置显示诸如输入占位符之类的其他伪元素，否则不会显示在DOM树中。

更多信息：https://stackoverflow.com/a/26853319/3963594

Answer 7

选择元素->选择悬停检查--->您可以看到:: before和after