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
F12
aunque 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
F8
ocmd + \
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