Phát Hiện Chuyển Tab
Công cụ Phát Hiện Chuyển Tab cho biết theo thời gian thực cửa sổ trình duyệt của bạn đang được focus, đã mất focus sang một ứng dụng khác, hay tab của nó đang bị ẩn. Công cụ đọc các sự kiện focus và blur của trình duyệt cùng với Page Visibility API để báo cáo một bức tranh 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.
Nó được tạo ra cho lập trình viên viết mã có nhận biết focus và hiển thị — tạm dừng video, giảm tần suất polling, dừng hoạt ảnh hay lưu trạng thái khi tab rời khỏi tầm nhìn — và cho bất kỳ ai chỉ muốn đo mình rời khỏi một trang bao nhiêu lần.
Thay vì đoán cách focus, blur và visibilitychange hoạt động, bạn xem các sự kiện kích hoạt trực tiếp, thấy đúng giá trị 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.
Cách Dùng Phát Hiện Chuyển Tab
Bắt đầu ở trạng thái Đang focus
Mở công cụ và nhìn vào dải trạng thái lớn. Nó bắt đầu ở trạng thái Đang focus, nghĩa là cửa sổ này đang được focus và đang hiển thị.
Bấm vào cửa sổ khác
Bấm vào một ứng dụng khác trong khi vẫn giữ tab này trên màn hình. Dải trạng thái chuyển sang Mất focus — cửa sổ đã mất focus, nhưng tab vẫn đang hiển thị.
Chuyển tab hoặc thu nhỏ
Chuyển sang một tab trình duyệt khác hoặc thu nhỏ cửa sổ. Dải trạng thái chuyển sang Bị ẩn vì bản thân tab không còn hiển thị nữa.
Theo dõi thống kê và nhật ký
Quay lại tab này để thấy trạng thái lật về Đang focus và một mục mới xuất hiện trong nhật ký sự kiện. Các thẻ thống kê cập nhật trực tiếp: thời gian focus, thời gian rời đi, số lần mất focus, số lần chuyển tab, và chuỗi focus dài nhất.
Phần hiển thị giá trị gốc bên dưới các thẻ cho biết đúng giá trị của document.hasFocus() và document.visibilityState tại mỗi khoảnh khắc. Dùng Xóa nhật ký để dọn sạch nhật ký sự kiện, hoặc Đặt lại để đưa mọi bộ đếm về 0 và bắt đầu một phiên đo hoàn toàn mới.
Tính Năng
Phát Hiện Ba Trạng Thái
Theo dõi Đang focus, Mất focus (cửa sổ bị blur) và Bị ẩn (tab không hiển thị), suy ra từ document.hasFocus() và document.visibilityState bất kể thứ tự các sự kiện kích hoạt.
Đồng Hồ Focus & Rời Đi Trực Tiếp
Tổng thời gian focus và tổng thời gian rời đi cập nhật liên tục, bên cạnh một đồng hồ cho trạng thái hiện tại và một đồng hồ cho cả phiên.
Bộ Đếm Riêng Biệt
Số lần cửa sổ mất focus và số lần chuyển tab được đếm tách riêng, nên bấm sang cửa sổ khác được phân biệt với chuyển tab.
Chuỗi Focus Dài Nhất
Ghi lại khoảng thời gian focus liên tục dài nhất của bạn và cập nhật trực tiếp khi chuỗi hiện tại kéo dài thêm.
Hiển Thị Giá Trị Gốc API
Cho biết giá trị boolean trực tiếp mà document.hasFocus() trả về và chuỗi mà document.visibilityState trả về.
Nhật Ký Sự Kiện Có Dấu Thời Gian
Mỗi thay đổi trạng thái được ghi lại mới nhất lên đầu kèm dấu thời gian và thời lượng của trạng thái trước, giữ lại 100 sự kiện gần nhất.
Tính Giờ Chống Điều Tiết
Thời gian được tính từ dấu thời gian thay vì từ bộ đếm đang chạy, nên việc điều tiết (throttle) đồng hồ chạy nền không làm sai lệch tổng số.
Nút Xóa & Đặt Lại
Xóa nhật ký dọn sạch nhật ký sự kiện, còn Đặt lại đưa mọi bộ đếm và đồng hồ về 0 để bắt đầu một phiên đo mới.
Giao Diện Tối
Giao diện tối tích hợp sẵn giữ cho dải trạng thái, thống kê và nhật ký dễ đọc trong môi trường thiếu sáng.
Câu Hỏi Thường Gặp
Làm sao kiểm tra một cửa sổ trình duyệt có đang được focus không?
Mở công cụ này và đọc dải trạng thái. Khi cửa sổ có focus bàn phím và đang hiển thị, nó hiện Đang focus và phần hiển thị giá trị gốc báo document.hasFocus() là true. Bấm vào cửa sổ khác hoặc chuyển tab để xem trạng thái và giá trị thay đổi ngay lập tức.
Khác nhau giữa "Mất focus" và "Bị ẩn" là gì?
Mất focus nghĩa là cửa sổ đã mất focus — ví dụ bạn bấm sang một ứng dụng khác — nhưng tab vẫn đang hiển thị trên màn hình. Bị ẩn nghĩa là bản thân tab không còn hiển thị nữa, chẳng hạn khi bạn chuyển sang tab khác hoặc thu nhỏ trình duyệt.
Khác nhau giữa document.hasFocus() và visibilitychange là gì?
document.hasFocus() cho biết cửa sổ hiện có focus nhập liệu hay không, còn visibilitychange kích hoạt khi document.visibilityState của tab chuyển giữa visible và hidden. Một cửa sổ có thể đang hiển thị nhưng mất focus (bạn bấm sang ứng dụng khác), nên công cụ này kết hợp cả hai tín hiệu để báo cáo một trạng thái đáng tin cậy duy nhất.
Làm sao phát hiện khi người dùng chuyển tab?
Lắng nghe sự kiện visibilitychange và kiểm tra document.hidden. Khi tab bị ẩn, người dùng đã chuyển đi hoặc thu nhỏ; khi quay lại, document.hidden trở về false. Công cụ này minh họa quy trình đó trực tiếp và tăng một bộ đếm số lần chuyển tab riêng mỗi khi tab bị ẩn.
Vì sao sự kiện blur kích hoạt trong khi trang vẫn đang hiển thị?
Sự kiện blur theo dõi focus nhập liệu, không phải hiển thị. Bấm sang cửa sổ khác hoặc mở công cụ dành cho lập trình viên sẽ chuyển focus bàn phím đi nơi khác, nên blur kích hoạt và document.hasFocus() trả về false dù trang vẫn còn trên màn hình. Công cụ báo cáo chính xác điều này là trạng thái Mất focus.
Vì 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 blur trước khi thay đổi hiển thị. Khi đó cửa sổ trước tiên chuyển sang Mất focus rồi mới Bị ẩn, nên cả hai chuyển tiếp đều được ghi lại. Các bộ đếm vẫn tăng chính xác — một lần cho việc rời focus và một lần cho việc tab bị ẩn.
Đồng hồ đo có chính xác khi tab chạy 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, nên việc điều tiết (throttle) mà trình duyệt áp dụng cho đồng hồ chạy nền không ảnh hưởng đến tổng số.
Công cụ có giữ lại dữ liệu của tôi sau khi đóng trang không?
Không. Mỗi lượt truy cập đều bắt đầu một phiên mới, mọi thứ chạy cục bộ trong trình duyệt của bạn, và không có gì được lưu hay gửi đi bất kỳ đâu.
Chưa có bình luận nào. Hãy là người đầu tiên!