Comprobar Foco de Ventana
La herramienta Comprobar Foco de Ventana muestra en tiempo real si la ventana de tu navegador tiene el foco, lo perdió frente a otra aplicación o tiene su pestaña oculta. Lee los eventos focus y blur del navegador junto con la Page Visibility API para reportar una imagen precisa, momento a momento, de cómo se está usando tu ventana.
Está pensada para desarrolladores que escriben código sensible al foco y a la visibilidad — pausar videos, limitar el polling, detener animaciones o guardar el estado cuando una pestaña deja de verse — y para cualquiera que solo quiera medir con qué frecuencia se aleja de una página.
En lugar de adivinar cómo se comportan focus, blur y visibilitychange, ves los eventos dispararse en vivo, observas los valores exactos que reporta el navegador y revisas un historial con marca de tiempo de cada cambio.
Cómo usar Comprobar Foco de Ventana
Empieza en el estado Con foco
Abre la herramienta y mira el gran indicador de estado. Comienza en el estado Con foco, lo que significa que esta ventana tiene el foco y está visible.
Haz clic en otra ventana
Haz clic en una aplicación distinta manteniendo esta pestaña en pantalla. El indicador cambia a Sin foco — la ventana perdió el foco, pero la pestaña sigue visible.
Cambia de pestaña o minimiza
Cambia a otra pestaña del navegador o minimiza la ventana. El indicador cambia a Oculta porque la pestaña en sí ya no está visible.
Observa las estadísticas y el registro
Vuelve a esta pestaña para ver cómo el estado regresa a Con foco y aparece una nueva entrada en el registro de eventos. Las tarjetas de estadísticas se actualizan en vivo: tiempo con foco, tiempo fuera, veces sin foco, cambios de pestaña y foco continuo más largo.
La lectura directa debajo de las tarjetas muestra los valores exactos de document.hasFocus() y document.visibilityState en cada momento. Usa Limpiar para vaciar el registro de eventos, o Reiniciar para poner a cero cada contador e iniciar una sesión de medición completamente nueva.
Funciones
Detección de tres estados
Sigue los estados Con foco, Sin foco (ventana sin el foco) y Oculta (pestaña no visible), derivados de document.hasFocus() y document.visibilityState sin importar el orden en que se disparen los eventos.
Temporizadores de foco y fuera
El tiempo total con foco y el tiempo total fuera se actualizan de forma continua, junto a un temporizador del estado actual y otro de toda la sesión.
Contadores independientes
Las veces que la ventana perdió el foco y la cantidad de cambios de pestaña se cuentan por separado, así hacer clic en otra ventana se distingue de cambiar de pestaña.
Foco continuo más largo
Registra tu periodo de foco ininterrumpido más largo y lo actualiza en vivo a medida que crece la racha actual.
Lectura directa de la API
Muestra el booleano en vivo que devuelve document.hasFocus() y la cadena que devuelve document.visibilityState.
Registro de eventos con marca de tiempo
Cada cambio de estado se registra del más reciente al más antiguo con una marca de tiempo y la duración del estado previo, conservando los últimos 100 eventos.
Cronometría a prueba de throttling
Los tiempos se calculan a partir de marcas de tiempo en lugar de un contador en marcha, de modo que el throttling de temporizadores en segundo plano no altera los totales.
Controles para limpiar y reiniciar
Limpiar vacía el registro de eventos, mientras que Reiniciar pone a cero cada contador y temporizador para iniciar una sesión de medición nueva.
Modo oscuro
Un tema oscuro integrado mantiene legibles el indicador de estado, las estadísticas y el registro en entornos con poca luz.
Preguntas frecuentes
¿Cómo compruebo si una ventana del navegador tiene el foco?
Abre esta herramienta y lee el indicador de estado. Cuando la ventana tiene el foco del teclado y está visible, muestra Con foco y la lectura directa reporta document.hasFocus() como true. Haz clic en otra ventana o cambia de pestaña para ver cómo el estado y el valor cambian al instante.
¿Cuál es la diferencia entre "Sin foco" y "Oculta"?
Sin foco significa que la ventana perdió el foco — por ejemplo, hiciste clic en otra aplicación — pero la pestaña sigue visible en pantalla. Oculta significa que la pestaña en sí ya no está visible, como cuando cambias a otra pestaña o minimizas el navegador.
¿Qué diferencia hay entre document.hasFocus() y visibilitychange?
document.hasFocus() te dice si la ventana tiene actualmente el foco de entrada, mientras que visibilitychange se dispara cuando el document.visibilityState de la pestaña cambia entre visible y hidden. Una ventana puede estar visible pero sin el foco (hiciste clic en otra app), por eso esta herramienta combina ambas señales para reportar un único estado confiable.
¿Cómo puedo detectar cuándo un usuario cambia de pestaña?
Escucha el evento visibilitychange y comprueba document.hidden. Cuando la pestaña está oculta, el usuario se alejó o minimizó; cuando vuelve, document.hidden es false de nuevo. Esta herramienta muestra ese flujo en vivo e incrementa un contador independiente de cambios de pestaña cada vez que la pestaña se oculta.
¿Por qué se dispara el evento blur mientras la página sigue visible?
El evento blur sigue el foco de entrada, no la visibilidad. Hacer clic en otra ventana o abrir las herramientas de desarrollo mueve el foco del teclado, por eso blur se dispara y document.hasFocus() devuelve false aunque la página siga en pantalla. La herramienta reporta esto con precisión como el estado Sin foco.
¿Por qué a veces veo dos entradas de registro por un solo cambio de pestaña?
Algunos navegadores disparan blur antes del cambio de visibilidad. En ese caso, la ventana primero queda Sin foco y luego Oculta, así que se registran ambas transiciones. Los contadores siguen incrementándose correctamente — una vez por perder el foco y otra por ocultarse la pestaña.
¿Son precisos los temporizadores cuando la pestaña está en segundo plano?
Sí. Los tiempos se calculan a partir de marcas de tiempo y no de un contador en marcha, de modo que el throttling que los navegadores aplican a los temporizadores en segundo plano no afecta los totales.
¿La herramienta conserva mis datos después de cerrar la página?
No. Cada visita inicia una sesión nueva, todo se ejecuta localmente en tu navegador y nada se guarda ni se envía a ningún sitio.
Aún no hay comentarios. ¡Sé el primero en comentar!