¿Qué es el Probador de Foco de Ventana?

El Probador de Foco de Ventana muestra, en tiempo real, si tu ventana del navegador es la ventana activa, si ha perdido el foco ante otra aplicación o si su pestaña está actualmente oculta. Combina los eventos focus y blur del navegador con la Page Visibility API para ofrecer una imagen precisa, momento a momento, de cómo se está usando tu ventana.

Diseñado para Desarrolladores

Escribe código consciente del foco y la visibilidad — pausa vídeos, reduce el ritmo de las peticiones de red, detén animaciones o guarda el estado cuando una pestaña deja de estar visible.

Mide tu Concentración

Controla con qué frecuencia abandonas una página. Observa cómo se disparan en vivo los eventos focus, blur y visibilitychange con los valores exactos que reporta el navegador.

Cómo funciona: En lugar de adivinar cómo se comportan los eventos de foco del navegador, puedes verlos dispararse en vivo, ver los valores exactos que reporta el navegador y revisar un historial con marcas de tiempo de cada cambio.

Table of Contents

1. ¿Qué es el Probador de Foco de Ventana?
- 1.1. Diseñado para Desarrolladores
- 1.2. Mide tu Concentración
2. Cómo Usar la Herramienta
3. Características
4. Preguntas Frecuentes

Cómo Usar la Herramienta

Sigue estos pasos para empezar a medir el foco y los estados de visibilidad de tu ventana en tiempo real:

Abre la Herramienta

Observa el gran banner de estado — comienza en el estado Focused, confirmando que la herramienta está activa y detectando tu ventana.

Cambia a Otra Aplicación

Haz clic en otra ventana de aplicación mientras mantienes esta pestaña en pantalla. El banner cambia a Unfocused — la ventana perdió el foco pero la pestaña sigue visible.

Oculta la Pestaña

Cambia a una pestaña diferente del navegador o minimiza la ventana. El banner cambia a Hidden, reflejando que la pestaña ya no está visible.

Vuelve a la Pestaña

Regresa para ver cómo el estado cambia a Focused y aparece una nueva entrada en el registro de eventos con una marca de tiempo precisa.

Estadísticas en Vivo y Controles

A medida que interactúas, las tarjetas de estadísticas se actualizan en vivo con las siguientes métricas:

Tiempo total con foco y tiempo total fuera
Número de veces que perdiste el foco
Número de cambios de pestaña
Tu racha de foco ininterrumpido más larga

El panel de valores en bruto debajo de las tarjetas muestra los valores en vivo exactos de document.hasFocus() y document.visibilityState en todo momento.

Controles de sesión: Usa el botón Clear para vaciar el registro de eventos, o Reset para poner a cero todos los contadores e iniciar una sesión de medición completamente nueva.

Características

El Probador de Foco de Ventana combina múltiples APIs del navegador en una vista única y unificada del estado de tu ventana.

Detección de Tres Estados

Detecta de forma fiable los estados Focused, Unfocused y Hidden usando document.hasFocus() y document.visibilityState, independientemente del orden en que se disparen los eventos.

Temporizadores en Vivo

El tiempo total con foco y el tiempo total fuera se actualizan de forma continua, junto con un temporizador para el estado actual y otro para toda la sesión.

Contadores Independientes

Las pérdidas de foco de la ventana y los cambios de pestaña se rastrean por separado — un clic en otra aplicación se distingue claramente de un cambio de pestaña.

Racha de Foco Más Larga

Registra y actualiza en tiempo real tu período de foco ininterrumpido más largo.

Lectura en Bruto de la API

Muestra los valores booleanos y de cadena en vivo devueltos directamente por las APIs del navegador subyacentes para total transparencia.

Registro de Eventos

Cada cambio de estado se registra con una marca de tiempo y la duración del estado anterior, mostrando la entrada más reciente primero.

Tus Datos Permanecen Privados

Toda la detección se ejecuta íntegramente en tu navegador — ningún dato abandona jamás tu dispositivo.

Sin subidas — no se envía nada a ningún servidor
Sin rastreo — tu actividad nunca se recopila ni almacena

Preguntas Frecuentes

¿Cuál es la diferencia entre "Unfocused" y "Hidden"?

Unfocused

Ventana Sin Foco

Hiciste clic en otra aplicación
La pestaña sigue visible en pantalla
El contenido de la página permanece a la vista

Hidden

Pestaña No Visible

Cambiaste a otra pestaña del navegador
O la ventana del navegador fue minimizada
El contenido de la página ya no está a la vista

¿Por qué abrir DevTools cambia el estado a Unfocused?

Cuando DevTools toma el foco del teclado, document.hasFocus() devuelve false aunque la página siga en pantalla. La herramienta reporta esto con precisión como el estado Unfocused — este es el comportamiento esperado del navegador, no un error.

¿Por qué a veces veo dos entradas en el registro por un solo cambio de pestaña?

Algunos navegadores disparan el evento blur antes del cambio de visibilidad. En ese caso, la ventana primero pasa a Unfocused y luego a Hidden, por lo que ambas transiciones quedan registradas. Los contadores siguen incrementándose correctamente — una vez por perder el foco y otra por quedar la pestaña oculta.

¿Son precisos los temporizadores cuando la pestaña está en segundo plano?

Sí. Los tiempos se calculan a partir de marcas de tiempo en lugar de un contador en ejecución, por lo que la limitación que los navegadores aplican a los temporizadores en segundo plano no afecta a los totales. Siempre obtienes el tiempo transcurrido con precisión, independientemente de la visibilidad de la pestaña.

¿Conserva la herramienta mis datos después de cerrar la página?

No. Cada visita inicia una sesión completamente nueva. Nada se guarda en el almacenamiento local, cookies ni en ningún servidor externo — tus datos desaparecen en el momento en que cierras o recargas la página.