Testar Foco da Janela
O Testar Foco da Janela mostra em tempo real se a janela do seu navegador está em foco, perdeu o foco para outro aplicativo ou tem a aba oculta. Ele lê os eventos focus e blur do navegador junto com a Page Visibility API para relatar, momento a momento, um retrato preciso de como sua janela está sendo usada.
Foi feito para desenvolvedores que escrevem código sensível a foco e visibilidade — pausar vídeos, reduzir o polling, parar animações ou salvar o estado quando uma aba sai de vista — e para qualquer pessoa que apenas queira medir com que frequência se afasta de uma página.
Em vez de adivinhar como focus, blur e visibilitychange se comportam, você vê os eventos dispararem ao vivo, observa os valores exatos que o navegador relata e revisa um histórico de cada mudança com data e hora.
Como Usar o Testar Foco da Janela
Comece no estado Em foco
Abra a ferramenta e observe o grande banner de status. Ele começa no estado Em foco, ou seja, esta janela está em foco e visível.
Clique em outra janela
Clique em outro aplicativo mantendo esta aba na tela. O banner muda para Sem foco — a janela perdeu o foco, mas a aba continua visível.
Troque de aba ou minimize
Mude para outra aba do navegador ou minimize a janela. O banner muda para Oculta, pois a própria aba deixou de estar visível.
Acompanhe as estatísticas e o registro
Volte para esta aba para ver o estado retornar a Em foco e uma nova entrada surgir no registro de eventos. Os cartões de estatística atualizam ao vivo: tempo em foco, tempo ausente, vezes sem foco, trocas de aba e maior foco.
A leitura bruta abaixo dos cartões mostra os valores exatos de document.hasFocus() e document.visibilityState a cada instante. Use Limpar para esvaziar o registro de eventos, ou Redefinir para zerar todos os contadores e iniciar uma sessão de medição totalmente nova.
Recursos
Detecção de Três Estados
Acompanha Em foco, Sem foco (janela sem foco) e Oculta (aba não visível), derivados de document.hasFocus() e document.visibilityState independentemente da ordem em que os eventos disparam.
Cronômetros de Foco e Ausência
O tempo total em foco e o tempo total ausente atualizam continuamente, junto com um cronômetro do estado atual e outro de toda a sessão.
Contadores Independentes
As vezes em que a janela perdeu o foco e o número de trocas de aba são contados separadamente, distinguindo clicar em outra janela de trocar de aba.
Maior Foco
Registra o seu maior período ininterrupto em foco e o atualiza ao vivo conforme o período atual cresce.
Leitura Bruta da API
Mostra o booleano ao vivo retornado por document.hasFocus() e a string retornada por document.visibilityState.
Registro de Eventos com Data/Hora
Cada mudança de estado é registrada do mais recente para o mais antigo, com data/hora e a duração do estado anterior, mantendo os últimos 100 eventos.
Cronometragem à Prova de Throttling
Os tempos são calculados a partir dos timestamps, e não de um contador em execução, então o throttling de timers em segundo plano não distorce os totais.
Controles de Limpar e Redefinir
Limpar esvazia o registro de eventos, enquanto Redefinir zera todos os contadores e cronômetros para iniciar uma nova sessão de medição.
Modo Escuro
Um tema escuro embutido mantém o banner de status, as estatísticas e o registro legíveis em ambientes com pouca luz.
Perguntas Frequentes
Como saber se a janela do navegador está em foco?
Abra esta ferramenta e leia o banner de status. Quando a janela tem o foco do teclado e está visível, ele exibe Em foco e a leitura bruta relata document.hasFocus() como true. Clique em outra janela ou troque de aba para ver o estado e o valor mudarem na hora.
Qual a diferença entre "Sem foco" e "Oculta"?
Sem foco significa que a janela perdeu o foco — por exemplo, você clicou em outro aplicativo — mas a aba continua visível na tela. Oculta significa que a própria aba deixou de estar visível, como ao trocar para outra aba ou minimizar o navegador.
Qual a diferença entre document.hasFocus() e visibilitychange?
document.hasFocus() informa se a janela tem foco de entrada no momento, enquanto visibilitychange dispara quando o document.visibilityState da aba alterna entre visible e hidden. Uma janela pode estar visível e ainda assim sem foco (você clicou em outro app), por isso esta ferramenta combina os dois sinais para relatar um único estado confiável.
Como detectar quando o usuário troca de aba?
Escute o evento visibilitychange e verifique document.hidden. Quando a aba está oculta, o usuário se afastou ou minimizou; quando ela retorna, document.hidden volta a ser false. Esta ferramenta demonstra esse fluxo ao vivo e incrementa um contador separado de trocas de aba sempre que a aba fica oculta.
Por que o evento blur dispara enquanto a página continua visível?
O evento blur rastreia o foco de entrada, não a visibilidade. Clicar em outra janela ou abrir as ferramentas de desenvolvedor desloca o foco do teclado, então o blur dispara e document.hasFocus() retorna false mesmo com a página ainda na tela. A ferramenta relata isso corretamente como o estado Sem foco.
Por que às vezes vejo duas entradas no registro para uma única troca de aba?
Alguns navegadores disparam blur antes da mudança de visibilidade. Nesse caso, a janela primeiro fica Sem foco e depois Oculta, então as duas transições são registradas. Os contadores ainda incrementam corretamente — uma vez por perder o foco e outra por a aba ficar oculta.
Os cronômetros são precisos quando a aba está em segundo plano?
Sim. Os tempos são calculados a partir dos timestamps, e não de um contador em execução, então o throttling que os navegadores aplicam aos timers não afeta os totais.
A ferramenta guarda meus dados depois que eu fecho a página?
Não. Cada visita inicia uma nova sessão, tudo roda localmente no seu navegador e nada é salvo ou enviado a lugar nenhum.
Ainda não há comentários. Seja o primeiro a comentar!