Công Cụ Kiểm Tra Focus Cửa Sổ Là Gì?

Công Cụ Kiểm Tra Focus Cửa Sổ hiển thị theo thời gian thực liệu cửa sổ trình duyệt của bạn có đang là cửa sổ hoạt động hay không, liệu nó có mất focus sang ứng dụng khác hay không, hoặc liệu tab của nó có đang bị ẩn hay không. Công cụ kết hợp các sự kiện focus và blur của trình duyệt với Page Visibility API để cung cấp hình ảnh chính xác, từng khoảnh khắc về cách cửa sổ của bạn đang được sử dụng.

Dành Cho Nhà Phát Triển

Viết code nhận biết focus và khả năng hiển thị — tạm dừng video, giảm tần suất polling mạng, dừng animation, hoặc lưu trạng thái khi tab không còn hiển thị.

Đo Lường Focus Của Bạn

Theo dõi tần suất bạn rời khỏi một trang. Xem các sự kiện focus, blur và visibilitychange kích hoạt trực tiếp với các giá trị chính xác mà trình duyệt báo cáo.

Cách hoạt động: Thay vì phỏng đoán cách các sự kiện focus của trình duyệt hoạt động, bạn có thể xem chúng kích hoạt trực tiếp, thấy các giá trị chính xác mà trình duyệt báo cáo, và xem lại lịch sử có dấu thời gian của mọi thay đổi.

Table of Contents

1. Công Cụ Kiểm Tra Focus Cửa Sổ Là Gì?
- 1.1. Dành Cho Nhà Phát Triển
- 1.2. Đo Lường Focus Của Bạn
2. Cách Sử Dụng Công Cụ
3. Tính Năng
4. Câu Hỏi Thường Gặp

Cách Sử Dụng Công Cụ

Làm theo các bước sau để bắt đầu đo trạng thái focus và hiển thị cửa sổ của bạn theo thời gian thực:

Mở Công Cụ

Nhìn vào banner trạng thái lớn — nó bắt đầu ở trạng thái Focused, xác nhận công cụ đang hoạt động và phát hiện cửa sổ của bạn.

Chuyển Sang Ứng Dụng Khác

Nhấp vào cửa sổ ứng dụng khác trong khi giữ tab này trên màn hình. Banner chuyển sang Unfocused — cửa sổ mất focus nhưng tab vẫn hiển thị.

Ẩn Tab

Chuyển sang tab trình duyệt khác hoặc thu nhỏ cửa sổ. Banner chuyển sang Hidden, phản ánh rằng tab không còn hiển thị nữa.

Quay Lại Tab

Quay lại để xem trạng thái chuyển sang Focused và một mục mới xuất hiện trong nhật ký sự kiện với dấu thời gian chính xác.

Thống Kê Trực Tiếp & Điều Khiển

Khi bạn tương tác, các thẻ thống kê cập nhật trực tiếp với các chỉ số sau:

Tổng thời gian focused và tổng thời gian rời đi
Số lần bạn rời khỏi focus
Số lần chuyển tab
Chuỗi focus liên tục dài nhất của bạn

Phần hiển thị thô bên dưới các thẻ cho thấy các giá trị trực tiếp chính xác của document.hasFocus() và document.visibilityState tại mọi thời điểm.

Điều khiển phiên: Dùng nút Clear để xóa nhật ký sự kiện, hoặc Reset để đưa tất cả bộ đếm về 0 và bắt đầu phiên đo lường hoàn toàn mới.

Tính Năng

Công Cụ Kiểm Tra Focus Cửa Sổ kết hợp nhiều API trình duyệt thành một giao diện thống nhất về trạng thái cửa sổ của bạn.

Phát Hiện Ba Trạng Thái

Phát hiện đáng tin cậy các trạng thái Focused, Unfocused và Hidden bằng cách sử dụng document.hasFocus() và document.visibilityState, bất kể thứ tự các sự kiện kích hoạt.

Bộ Đếm Thời Gian Trực Tiếp

Tổng thời gian focused và tổng thời gian rời đi cập nhật liên tục, cùng với bộ đếm thời gian cho trạng thái hiện tại và toàn bộ phiên.

Bộ Đếm Độc Lập

Số lần mất focus cửa sổ và số lần chuyển tab được theo dõi riêng biệt — nhấp sang ứng dụng khác được phân biệt rõ ràng với việc chuyển tab.

Chuỗi Focus Dài Nhất

Ghi lại và cập nhật khoảng thời gian focus liên tục dài nhất của bạn theo thời gian thực.

Hiển Thị Thô API

Hiển thị các giá trị boolean và chuỗi trực tiếp được trả về bởi các API trình duyệt cơ bản để đảm bảo tính minh bạch hoàn toàn.

Nhật Ký Sự Kiện

Mọi thay đổi trạng thái đều được ghi lại với dấu thời gian và thời lượng của trạng thái trước đó, hiển thị mục mới nhất trước.

Dữ Liệu Của Bạn Được Bảo Mật

Toàn bộ quá trình phát hiện chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào rời khỏi thiết bị của bạn.

Không tải lên — không có gì được gửi đến bất kỳ máy chủ nào
Không theo dõi — hoạt động của bạn không bao giờ được thu thập hay lưu trữ

Câu Hỏi Thường Gặp

Sự khác biệt giữa "Unfocused" và "Hidden" là gì?

Unfocused

Cửa Sổ Mất Focus

Bạn đã nhấp vào ứng dụng khác
Tab vẫn hiển thị trên màn hình
Nội dung trang vẫn trong tầm nhìn

Hidden

Tab Không Hiển Thị

Bạn đã chuyển sang tab trình duyệt khác
Hoặc cửa sổ trình duyệt đã được thu nhỏ
Nội dung trang không còn trong tầm nhìn

Tại sao mở DevTools lại thay đổi trạng thái sang Unfocused?

Khi DevTools chiếm focus bàn phím, document.hasFocus() trả về false mặc dù trang vẫn đang hiển thị trên màn hình. Công cụ báo cáo điều này chính xác là trạng thái Unfocused — đây là hành vi bình thường của trình duyệt, không phải lỗi.

Tại sao đôi khi tôi thấy hai mục nhật ký cho một lần chuyển tab?

Một số trình duyệt kích hoạt sự kiện blur trước khi thay đổi hiển thị. Trong trường hợp đó, cửa sổ trước tiên trở thành Unfocused rồi mới thành Hidden, vì vậy cả hai chuyển đổi đều được ghi lại. Các bộ đếm vẫn tăng đúng — một lần cho việc rời focus và một lần cho tab trở thành hidden.

Các bộ đếm thời gian có chính xác khi tab đang ở nền không?

Có. Thời gian được tính từ dấu thời gian thay vì từ bộ đếm đang chạy, vì vậy việc trình duyệt giảm tốc độ timer cho tab nền không ảnh hưởng đến tổng số. Bạn luôn nhận được thời gian đã trôi qua chính xác bất kể tab có hiển thị hay không.

Công cụ có lưu dữ liệu của tôi sau khi tôi đóng trang không?

Không. Mỗi lần truy cập bắt đầu một phiên hoàn toàn mới. Không có gì được lưu vào local storage, cookie, hay bất kỳ máy chủ bên ngoài nào — dữ liệu của bạn sẽ biến mất ngay khi bạn đóng hoặc làm mới trang.