Como posso inspecionar e ajustar: antes e: depois dos pseudo-elementos no navegador?

91

Eu criei alguns elementos DOM bastante elaborados com um pseudo-elemento: after, e gostaria de poder inspecioná-los e ajustá-los no Chrome Inspector ou Firebug ou equivalente.

Apesar desse recurso ser mencionado nesta postagem do blog WebKit / Safari (datado de 2010), não consigo encontrar esse recurso no Chrome ou no Safari. O Chrome tem pelo menos caixas de seleção para inspecionar: hover,: visitado e: estados ativos, mas: antes e: depois estão longe de serem vistos.

Além disso, esta postagem do blog (datada de 2009!) Menciona que esse recurso existe nas ferramentas de desenvolvimento do IE, mas atualmente estou usando o Mac OS, então isso não ajuda em nada. Além disso, o IE não é um navegador que tenho como alvo principal.

Existe alguma maneira de inspecionar esses pseudoelementos?

EDIT: Além de estar errado sobre o Firebug ser incapaz de inspecionar esses elementos, descobri que o Opera é muito bom em Inspecionar: antes e: depois dos elementos fora da caixa.

— Majackson
fonte

1

com o firebug você pode inspecionar o estilo desses pseudoelementos.

— Fabrizio Calderan

@ F.Calderan como? Ele atualiza a página se eu modificá-los?

— Majackson,

sim, posso alterar as propriedades dos pseudoelementos via firebug 1.9.1 no Fx11 / MacOS

— Fabrizio Calderan

Sim, eu também vejo. Desculpas, eu estava confundindo as novas ferramentas de desenvolvimento embutidas do Firefox (que eu não usei antes) com algum tipo de reformulação do Firebug com inexplicavelmente menos recursos. Estou corrigido;)

— majackson

Verifique esta resposta para testar pseudoelementos em chrome e firefox stackoverflow.com/a/20716179/1868660

— Subodh Ghulaxe

61

Nas ferramentas Dev do Chrome , os estilos de um pseudoelemento são visíveis no painel:

Caso contrário, você também pode inserir a seguinte linha no console JavaScript e inspecionar o CSSStyleDeclarationobjeto retornado :

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

— Rob W
fonte

9

Eu não vejo isso. Que elemento você está inspecionando para ver isso aparecer no painel? Além disso, qual versão do Chrome você está usando?

— majackson

@majackson Chrome 18.0 Ubuntu 11.10. Inspecione o xnesta demonstração: jsfiddle.net/2M6JA

— Rob W

Vejo as pseudoclasses na sua demonstração, mas não no meu código, o que me faz suspeitar que estou tendo outro problema diferente. De qualquer forma, é óbvio que você está correto, então marcarei como resolvido - muito obrigado!

— Majackson,

Costura: os pseudo estilos não podem ser inspecionados em alguns casos. Confira esta bifurcação de @Rob W fiddle: jsfiddle.net/RQsY6 => o pseudo-elemento na tag a não pode ser inspecionado.

— Fabien Quatravaux

1

@FabienQuatravaux Pelo menos no Chrome 23, vejo div::beforecom content: 'x';- screenshot: i.stack.imgur.com/nQ2TZ.png . EDIT: Nossos violinos não diferem em nada. Você deseja substituir divpor a? Ainda assim, o pseudo-elemento ainda pode ser inspecionado: jsfiddle.net/RQsY6/1 (basta selecionar a tag âncora na árvore DOM).

— Rob W

31

A partir do Chrome 31, os pseudoelementos são exibidos no painel de elementos como elementos filhos de seus pais, conforme mostrado na imagem a seguir:

Captura de tela

Você pode selecioná-los como faria com um elemento normal, mas se remover o contentestilo, o pseudo elemento também será removido e o foco do devtools mudará para seu pai.

Parece que os estilos CSS herdados não são visíveis e você não pode editar o conteúdo CSS do painel de elementos.

— AMK
fonte

1

DUH !! Obrigado :)

— R Claven

22

O Chrome não mostrará: antes e: depois dos pseudo-elementos na árvore DOM, se eles perderem o atributo "conteúdo". Deve ser definido, mesmo se estiver definido como nada.

Isso não aparecerá:

:after {
  background-color: red;
}

Isso aparecerá no inspetor:

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

Espero que ajude.

— pop
fonte

5

Depois de muita frustração, eu descobri que o Firefox não mostra os pseudo elementos na árvore do documento em tudo , mas se você selecionar a exata elemento que tem elemento pseudo (s) definido, então os estilos para o seu elemento pseudo (s ) são mostrados na seção de regras de estilo no lado direito. Isso é verdadeiro tanto para o firebug quanto para a inspeção interna ("Q"), e estou chocado que ninguém se preocupou em explicar isso claramente antes.

Claramente, o tratamento de cromo / cromo de pseudoelementos é muito superior, pois eles podem ser selecionados (tanto na árvore do documento como diretamente na página) e inspecionados como elementos regulares, com layout, propriedades e tudo mais, independente de seu "proprietário "

Versões de navegador que estou usando atualmente: Chromium 40.0.2214.91, Firefox 31.3.0.

— aditsu saiu porque SE é EVIL
fonte

1

O Firefox já tem esse recurso há algum tempo, basta clicar com o botão direito, "inspecionar elemento" e ver os elementos antes e depois no painel direito do inspetor.

— NoBugs
fonte

1

Não vejo os :aftere :beforepseudo elementos na ferramenta Inspetor "nativo" - alternando os elementos pseudo me dá hover, activee focusúnica. Eu posso vê-los no Firebug.

— sameers de

@sameers Você está falando sobre os botões no menu do botão direito? Porque: antes e: depois não são algo que você alterne lá, eles sempre devem aparecer no inspetor de css.

— NoBugs de

0

Selecione o elemento -> selecione o foco marcado ---> você pode ver :: antes e depois dos elementos

— vasu
fonte

0

Pelo menos desde o Chrome 62, há uma configuração no DevTools para 'Mostrar DOM de sombra do agente do usuário' que exibe pseudo-elementos adicionais como marcadores de posição de entrada , que não apareceriam na árvore DOM de outra forma.

Mais informações: https://stackoverflow.com/a/26853319/3963594

— jgangso
fonte