Como inspeccionar elementos que se muestran y ocultan a mousemove
#devtools
Hay elementos que se muestran y esconden en mouse move (por medios de javascript), tales como tooltips o flyouts como los de Stripe y no solo basta con agregar una clase o usar un simple hover para hacer que se muestren.
Este es un post para explicar como evitar que el elemento se oculte y así poder inspeccionarlos con el DevTools.
Para esto tenemos que seguir estos pasos:
- Abre el DevTools para estar preparado, esto lo puedes hacer con
F12 - Ahora regresa a la pagina y haz hover sobre el trigger para que aparezca el elemento que queremos inspeccionar
- Usando el teclado, regresa al DevTools (lo puedes hacer presionando otra vez
F12aunque en algunos casos lo debes hacer dos veces) - Aquí debes detener el script, hay varias formas de hacerlo
- Ir a la pestaña Console y escribir
debugger - Ir a la pestaña Source y presionar
F8ocmd + \en MacOS octrl + \en Windows
- Ir a la pestaña Console y escribir
Nota: Para cambiar de pestaña en el DevTools solo se tiene que presionar cmd + [ o cmd + ] en MacOS o ctrl + [ o ctrl + ] en Windows