El truco de F8 en Chrome DevTools es una joya oculta que simplifica trescientos millones de veces el proceso de inspeccionar estilos de hover y popover al permitirte congelar la interfaz de usuario. Esto proporciona una forma eficiente de depurar y diseñar estados de interfaz de usuario transitorios tan rompecabezas como es HOVER. Y una vez que empieces a usarlo, te preguntarás cómo sobrevivías sin él.
Cómo inspeccionar estilos de hover y popover con el truco de F8 en Chrome DevTools
Recuerda hacer click en el elemento a forzar el hover, y después en la ventana de DevTools antes de presionar F8
Los estados de hover y popover son temporales y desaparecen tan pronto como mueves el cursor o haces clic en otro lugar, dificultando la inspección de sus estilos. Afortunadamente, Chrome DevTools proporciona un práctico truco para pausar estas interacciones.
El truco de F8 en Chrome DevTools
Chrome DevTools tiene una función que te ayuda a congelar el estado de la interfaz de usuario, permitiéndote inspeccionar elementos transitorios como tarjetas de hover, tooltips y popovers. Al presionar F8 en Windows/Linux (o fn + F8 en macOS), puedes pausar la ejecución del script, congelando efectivamente la interfaz de usuario.
Cómo usarlo
- Abre Chrome DevTools: Haz clic derecho en el elemento de la página que quieres inspeccionar y selecciona “Inspeccionar” o usa Ctrl+Shift+I / Cmd+Opt+I.
- Navega a la pestaña Sources: En DevTools, navega a la pestaña “Sources”.
- Activa el estado HOVER: Pasa el cursor sobre el elemento o activa el popover en la página web para que se muestre,
- Mueve el cursor hacia dentro de la ventana de DevTools y haz click en alguna parte de esta (el popover no debería desactivarse).
- Ahora para congelar la interfaz de usuario: …con el popover visible … y sin haber hecho ningún otro click … YA PUEDES PRESIONAR F8 !!!
La interfaz de usuario se debería haber congelado congelará y ahora puedes inspeccionar los estilos aplicados al estado transitorio.
Nota: Si has hecho clic en cualquier parte de la página real, presionar F8 no hará nada. Asegúrate de que tu última interacción haya sido dentro de la ventana de DevTools para que la función funcione correctamente.
F8 congelará la interfaz y aparecerá una barrita que dice “Pausado en depurador” y donde puedes retomar la acción normal en la pagina o avanzar al próximo llamado de función
Casos de uso prácticos
- Depuración: Este truco es invaluable cuando intentas depurar problemas relacionados con estilos de hover o popover.
- Inspección de diseño: Los diseñadores pueden usar esta función para asegurarse de que el estilo coincida con las especificaciones de diseño sin tener que pedirle a los desarrolladores que hagan cambios temporales.
- Perfilado de rendimiento: Congelar el estado de la interfaz de usuario también puede ayudar con el perfilado de rendimiento para animaciones o transiciones, ya que puedes inspeccionar los estilos aplicados sin que desaparezcan.
