Como depurar eventos mouse o hover en CSS/Javascript

Esto es medio confuso, pero vamos a tratar de explicarlo: Tienes un caso de uso, en el que se requiere depurar o aplicar estilo a un elemento de una página. Nada del otro mundo, excepto que el elemento solo aparece cuando se produce un evento hover o mouse-over. Sin embargo, cuando el evento no sucede, el elemento no aparece por lo que no es posible trabajar con el elemento que es el objetivo. Claramente no es posible hacerlo de forma "normal", sino que hay que usar un truco. Hay que abrir en Chrome, la herramienta de desarrolladores, y escribir lo siguiente en la consola:
setTimeout(() => {debugger;}, 5000)
De acuerdo al tiempo establecido, tendremos algo de 5 segundos para que el evento mouse-over o hover se produzca. El debugger se activará, previniendo que el DOM se modifique, hasta que continues. Ahora, es posible aplicar la inspección al elemento en cuestión y hacer los cambios necesarios.

Comentarios