Mantengo un sitio web que tiene un comportamiento mágico (bueno, agrega algunos caracteres que no están en el html) a los elementos etiquetados:
class="popupover-host"
No puedo encontrar esto referenciado en el css, y hasta ahora no lo veo referenciado en ningún .js
En el navegador, está renderizado previamente, y examinar el elemento me muestra el texto completamente procesado (por ejemplo, el texto que está en el código fuente html MÁS los caracteres agregados).
Siento que necesito ver cómo el navegador procesa el html, pero no lo he hecho antes.
La pregunta se reduce a esto (creo):
El html + css estático se puede descifrar "a mano" asignando las etiquetas de "clase" en el html al css relevante. Sabemos que el navegador une los dos en el momento del renderizado. Agregue js a la imagen, y se vuelve... más difícil averiguar cómo se creó el html final.
Y con css anidado... también es difícil de entender.
Pregunta:
Entonces, ¿cómo observo cómo el navegador lo une todo?
Por ejemplo, si conozco la "clase" que se está modificando, ¿cómo puedo ver de dónde provienen las modificaciones? (css y/o js)
¿Hay alguna manera de: a) Hacer que el navegador me diga las cosas que han modificado el contenido de esta clase, o b) ejecutar un "depurador" con un reloj en la clase en cuestión, para ver qué aplica el navegador al contenidos de esa clase?
Bien, encontré la manera de averiguar qué js está modificando este elemento.
Estos pasos son para Chrome en Windows.
Primero, busque el nombre del elemento. Haga clic con el botón derecho en la palabra html procesada que se está modificando y seleccione Inspeccionar elemento.
Mire el DOM y encuentre la clase que es específica para este elemento. En este caso lo es:
class="popupover-host"(Luego busco en toda la fuente html para asegurarme de que esta clase sea específica solo para el texto modificado en cuestión).
Ahora, abra Herramientas para desarrolladores (F12) y presione Ctrl+Shift+F
Pegar: popupover-host
En el cuadro de búsqueda y ejecute la búsqueda.
En mi caso, obtuve tres aciertos:
El js tenía la modificación:
return i.innerHTML = "*" + i.innerHTML¡Ajá! ¡Ahora sé por qué el html renderizado incluye un carácter * que no está en el html fuente ni lo hace el css!