¿Cómo puedo inspeccionar y modificar: antes y después de los pseudo-elementos en el navegador?


91

He creado algunos elementos DOM bastante elaborados con un pseudo-elemento: after, y me gustaría poder inspeccionarlos y modificarlos en Chrome Inspector o Firebug o equivalente.

A pesar de que esta característica se menciona en esta publicación de blog de WebKit / Safari (con fecha de 2010), no puedo encontrar esta característica en Chrome ni en Safari. Chrome tiene al menos casillas de verificación para inspeccionar: hover,: visitado y: estados activos, pero: antes y: después no se ven por ninguna parte.

Además, esta publicación de blog (¡con fecha de 2009!) Menciona que esta capacidad existe en las herramientas de desarrollo de IE, pero actualmente estoy usando Mac OS, por lo que esto no me ayuda. Además, IE no es un navegador al que me dirijo principalmente.

¿Hay alguna forma de inspeccionar estos pseudo-elementos?

EDITAR: Además de estar equivocado acerca de que Firebug no puede inspeccionar estos elementos, descubrí que Opera es bastante bueno en la inspección: antes y después de los elementos listos para usar.


1
con firebug puedes inspeccionar el estilo de esos pseudoelementos.
Fabrizio Calderan

@ F.Calderan ¿cómo? ¿Actualiza la página si las modifico?
majackson

sí, puedo cambiar las propiedades de los pseudoelementos a través de firebug 1.9.1 en Fx11 / MacOS
Fabrizio Calderan

Ah, sí, yo también lo veo. Disculpas, estaba confundiendo las nuevas herramientas de desarrollo incorporadas de Firefox (que no había usado antes) con algún tipo de rediseño de Firebug con inexplicablemente menos funciones. Me mantengo corregido;)
majackson

Verifique esta respuesta para probar pseudoelementos en Chrome y
Firefox

Respuestas:


61

En las herramientas de desarrollo de Chrome , los estilos de un pseudoelemento son visibles en el panel:

De lo contrario, también puede ingresar la siguiente línea en la consola de JavaScript e inspeccionar el CSSStyleDeclarationobjeto devuelto :

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

9
No veo esto. ¿Qué elemento está inspeccionando para que aparezca en el panel? Además, ¿qué versión de Chrome estás usando?
majackson

@majackson Chrome 18.0 Ubuntu 11.10. Inspeccione el xen esta demostración: jsfiddle.net/2M6JA
Rob W

Veo las pseudoclases en su demostración, pero no en mi código, lo que me hace sospechar que tengo otro problema diferente. En cualquier caso, es obvio que tiene razón, así que marcaré esto como resuelto, ¡muchas gracias!
majackson

Dice que los pseudoestilos no se pueden inspeccionar en algunos casos. Echa un vistazo a esta bifurcación del violín de @Rob W: jsfiddle.net/RQsY6 => el pseudo-elemento en la etiqueta a no se puede inspeccionar.
Fabien Quatravaux

1
@FabienQuatravaux Al menos en Chrome 23, veo div::beforecon content: 'x';: captura de pantalla: i.stack.imgur.com/nQ2TZ.png . EDITAR: Nuestros violines no difieren en absoluto. ¿Querías reemplazar divcon a? Aún así, el pseudo-elemento aún se puede inspeccionar: jsfiddle.net/RQsY6/1 (solo seleccione la etiqueta de anclaje en el árbol DOM).
Rob W

31

A partir de Chrome 31, los pseudo elementos se muestran en el panel de elementos como elementos secundarios de su padre, como se muestra en la siguiente imagen:

Captura de pantalla

Puede seleccionarlos como lo haría con un elemento normal, pero si elimina el contentestilo, el pseudo elemento también se eliminará y el foco de devtools cambiará a su padre.

Parece que los estilos CSS heredados no se pueden ver y no puede editar el contenido CSS desde el panel de elementos.


1
¡¡DUH !! Gracias :)
R Claven

22

Chrome no mostrará: antes y: después de los pseudo elementos en el árbol DOM, si pierden el atributo "contenido". Debe configurarse, incluso si no está configurado en nada.

Esto no aparecerá:

:after {
  background-color: red;
}

Esto se mostrará en el inspector:

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

Espero eso ayude.


5

Después de una gran cantidad de frustración, me di cuenta de que Firefox no muestra los pseudo elementos en la estructura del documento en absoluto , pero si selecciona la exacta elemento que tiene pseudo elemento (s) definido, entonces los estilos para su elemento seudo (s ) se muestran en la sección de reglas de estilo en el lado derecho. Esto es cierto tanto para firebug como para la inspección incorporada ("Q"), y me sorprende que nadie se haya molestado en explicar esto claramente antes.

Claramente, el manejo de los pseudo elementos de chrome / chromium es muy superior, ya que pueden seleccionarse (tanto en el árbol del documento como directamente en la página) e inspeccionarse como elementos normales, con diseño, propiedades y todo lo demás, independientemente de su "propietario ".

Versiones de navegador que estoy usando actualmente: Chromium 40.0.2214.91, Firefox 31.3.0.


1

Firefox ha tenido esta característica por un tiempo, simplemente haga clic derecho, "inspeccionar elemento" y vea los elementos antes y después en el panel derecho del inspector.


1
No veo las :aftery :beforelos pseudo elementos en la herramienta inspector de "nativo" - alternar los pseudo elementos me da hover, activey focussolamente. Sin embargo, puedo verlos en Firebug.
Sameers

@sameers ¿Estás hablando de los conmutadores en el menú contextual? Porque: antes y: después no son algo que alternar allí, siempre deberían aparecer en el inspector de CSS.
NoBugs

0

Seleccionar elemento -> seleccionar desplazamiento marcado ---> puede ver :: elementos antes y después Seleccionar elemento -> seleccionar desplazamiento marcado ---> puede ver :: elementos antes y después


0

Al menos desde Chrome 62, hay una configuración en DevTools para 'Mostrar el DOM sombra del agente de usuario' que muestra pseudoelementos adicionales como marcadores de posición de entrada , que de otra manera no aparecerían en el árbol DOM.

Más información: https://stackoverflow.com/a/26853319/3963594

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.