Window Focus Tester
The Window Focus Tester shows in real time whether your browser window has focus, has lost focus to another application, or has its tab hidden. It reads the browser's focus and blur events together with the Page Visibility API to report an accurate, moment-by-moment picture of how your window is being used.
It is built for developers who write focus- and visibility-aware code — pausing videos, throttling polling, stopping animations, or saving state when a tab leaves view — and for anyone who simply wants to measure how often they switch away from a page.
Instead of guessing how focus, blur and visibilitychange behave, you watch the events fire live, see the exact values the browser reports, and review a timestamped history of every change.
How to Use the Window Focus Tester
Start in the Focused state
Open the tool and look at the large status banner. It starts in the Focused state, meaning this window has focus and is visible.
Click another window
Click a different application while keeping this tab on screen. The banner turns to Unfocused — the window lost focus, but the tab is still visible.
Switch tabs or minimize
Switch to another browser tab or minimize the window. The banner turns to Hidden because the tab itself is no longer visible.
Watch the stats and log
Return to this tab to see the state flip back to Focused and a new entry appear in the event log. The stat cards update live: time focused, time away, times unfocused, tab switches, and longest focus streak.
The raw readout below the cards shows the exact values of document.hasFocus() and document.visibilityState at every moment. Use Clear to empty the event log, or Reset to zero every counter and start a brand-new measuring session.
Features
Three-State Detection
Tracks Focused, Unfocused (window blurred), and Hidden (tab not visible), derived from document.hasFocus() and document.visibilityState regardless of the order events fire.
Live Focus & Away Timers
Total time focused and total time away update continuously, alongside a timer for the current state and one for the whole session.
Independent Counters
Times the window lost focus and the number of tab switches are counted separately, so clicking another window is distinguished from switching tabs.
Longest Focus Streak
Records your longest uninterrupted period of focus and updates it live as the current streak grows.
Raw API Readout
Shows the live boolean returned by document.hasFocus() and the string returned by document.visibilityState.
Timestamped Event Log
Every state change is logged newest-first with a timestamp and the duration of the previous state, keeping the latest 100 events.
Throttle-Proof Timing
Times are calculated from timestamps rather than a running counter, so background timer throttling does not skew the totals.
Clear & Reset Controls
Clear empties the event log, while Reset zeroes every counter and timer to start a fresh measuring session.
Dark Mode
A built-in dark theme keeps the status banner, stats, and log readable in low-light setups.
Frequently Asked Questions
How do I test if a browser window has focus?
Open this tool and read the status banner. When the window has keyboard focus and is visible, it shows Focused and the raw readout reports document.hasFocus() as true. Click another window or switch tabs to watch the state and value change instantly.
What is the difference between "Unfocused" and "Hidden"?
Unfocused means the window lost focus — for example you clicked another application — but the tab is still visible on screen. Hidden means the tab itself is no longer visible, such as when you switch to another tab or minimize the browser.
What is the difference between document.hasFocus() and visibilitychange?
document.hasFocus() tells you whether the window currently has input focus, while visibilitychange fires when the tab's document.visibilityState flips between visible and hidden. A window can be visible yet unfocused (you clicked another app), so this tool combines both signals to report a single reliable state.
How can I detect when a user switches tabs?
Listen for the visibilitychange event and check document.hidden. When the tab is hidden, the user has switched away or minimized; when it returns, document.hidden is false again. This tool demonstrates that flow live and increments a separate tab switches counter each time the tab becomes hidden.
Why does the blur event fire while the page is still visible?
The blur event tracks input focus, not visibility. Clicking another window or opening developer tools moves keyboard focus away, so blur fires and document.hasFocus() returns false even though the page is still on screen. The tool reports this accurately as the Unfocused state.
Why do I sometimes see two log entries for one tab switch?
Some browsers fire blur before the visibility change. In that case the window first becomes Unfocused and then Hidden, so both transitions are recorded. The counters still increment correctly — once for leaving focus and once for the tab becoming hidden.
Are the timers accurate when the tab is in the background?
Yes. Times are calculated from timestamps rather than from a running counter, so the background throttling that browsers apply to timers does not affect the totals.
Does the tool keep my data after I close the page?
No. Each visit starts a fresh session, everything runs locally in your browser, and nothing is saved or sent anywhere.
No comments yet. Be the first to comment!