Cách trang web đoán DevTools đang mở: chênh lệch kích thước cửa sổ, đo thời gian lệnh debugger và getter của console, vì sao dễ nhầm và chỉ là tín hiệu yếu.
Có những trang trở nên kỳ lạ ngay khi bạn nhấn F12: nội dung biến mất, tab đứng hình, hoặc xuất hiện thanh "Paused in debugger" không chịu tắt. Đó không phải phép màu. Một đoạn script trên trang đang đoán rằng DevTools đang mở, dựa vào những tác dụng phụ mà trình duyệt không thể giấu khỏi JavaScript của trang. Bài này trình bày ba kỹ thuật kinh điển, cách mỗi kỹ thuật thất bại, và lý do không kỹ thuật nào tự nó là tín hiệu đáng tin.
Ý chính
- Không trình duyệt nào báo cho trang "DevTools đang mở". Mọi bộ phát hiện đều là suy đoán từ một tác dụng phụ: kích thước cửa sổ thay đổi, script bị tạm dừng, hoặc một lệnh gọi console hành xử khác đi.
- Chênh lệch kích thước cửa sổ so sánh
outerWidthvớiinnerWidth(và chiều cao). DevTools gắn vào cửa sổ chiếm chỗ của viewport nên chênh lệch tăng. DevTools tách thành cửa sổ riêng thì không làm đổi chênh lệch. - Lệnh
debuggerchỉ tạm dừng thực thi khi DevTools đang mở, nên script có thể đo thời gian dừng, hoặc gọi lệnh trong vòng lặp để "phạt" bảng đang mở. Đó là lý do một số trang bị đứng. - Getter của console chạy khi console định dạng một đối tượng. Đây cùng họ với rò rỉ tuần tự hóa CDP, và hành vi thay đổi theo phiên bản trình duyệt.
- Đây là tín hiệu yếu. Lập trình viên, nhân viên hỗ trợ và người dùng tò mò đều mở DevTools một cách chính đáng, còn zoom hay thanh bên gây dương tính giả, nên các hệ thống nghiêm túc chỉ coi nó là đầu vào có trọng số thấp.
Vì sao website tìm DevTools đang mở
Mục tiêu gần như không bao giờ là bắt người đang đọc trang. Động cơ thường gặp:
- Chống scraping. Xem request mạng hoặc DOM thường là bước đầu của việc thu thập dữ liệu, nên site có thể tăng điểm rủi ro.
- Bảo vệ mã phía client. Logic paywall, script bị làm rối và mã xác minh quảng cáo dễ bị nghiên cứu hơn khi gắn trình gỡ lỗi.
- Chấm điểm gian lận và lạm dụng. Trình kiểm tra đang mở là thêm một đầu vào yếu bên cạnh các bằng chứng mạnh hơn trong hệ thống phát hiện bot.
Lưu ý phạm vi: bài này nói về người dùng tự tay mở DevTools. Các framework tự động hóa điều khiển trình duyệt qua giao thức đứng sau DevTools là bài toán khác, xem phát hiện tự động hóa CDP và phát hiện trình duyệt headless.
Kỹ thuật 1: chênh lệch kích thước cửa sổ
Trình duyệt cung cấp hai kích thước. window.outerWidth là chiều rộng cả cửa sổ trình duyệt gồm thanh công cụ và bảng bên, còn window.innerWidth là chiều rộng viewport của trang. Bình thường chiều rộng chỉ lệch vài pixel viền cửa sổ, còn chiều cao lệch bằng chiều cao thanh tab và thanh công cụ, vì vậy các bộ phát hiện đặt ngưỡng cao hơn hẳn mức đó. Gắn DevTools vào cạnh hoặc đáy thì viewport co lại trong khi cửa sổ ngoài giữ nguyên, nên chênh lệch nhảy lên hàng trăm pixel.
const threshold = 160; // px
const widthGap = window.outerWidth - window.innerWidth > threshold;
const heightGap = window.outerHeight - window.innerHeight > threshold;
const looksOpen = widthGap || heightGap;
Cách này rẻ, thụ động và không cần quyền nào, nên là kiểm tra phổ biến nhất. Nó cũng thất bại theo những cách dễ đoán:
- DevTools tách thành cửa sổ riêng mở trong cửa sổ của nó, viewport của trang không đổi nên không phát hiện được.
- Bảng bên của trình duyệt (danh sách đọc, trợ lý AI, thanh tab dọc) cũng làm viewport co lại và trông giống trình kiểm tra đang gắn vào.
- Zoom và tỷ lệ hiển thị trên một số nền tảng làm đổi quan hệ giữa hai giá trị, tạo ra chênh lệch dù không có DevTools.
- Chế độ xem di động và nhúng thường báo giá trị lạ hoặc bằng nhau, nên kiểm tra này vô nghĩa ở đó.
Hai giá trị này cũng được dùng trong các kiểm tra màn hình và cửa sổ của vân tay qua độ phân giải màn hình.
Kỹ thuật 2: lệnh debugger
Lệnh debugger gọi công cụ gỡ lỗi đang có, và không làm gì nếu không có. Khi DevTools đóng, nó là thao tác rỗng tốn vài micro giây. Khi DevTools mở (và điểm dừng đang bật), việc thực thi dừng tại dòng đó cho đến khi người dùng tiếp tục.
Điều này cho trang hai cách dùng. Cách thứ nhất là đo thời gian: lấy một mốc, chạy debugger, lấy mốc nữa, và coi khoảng dừng quá vài chục mili giây là "có trình gỡ lỗi gắn vào".
const t0 = performance.now();
debugger;
const paused = performance.now() - t0 > 100; // human-scale pause
Cách thứ hai là cái bẫy: gọi debugger liên tục từ bộ hẹn giờ hoặc vòng lặp, nên mỗi lần bạn tiếp tục là nó dừng lại. Đó là lý do trang có vẻ đứng hình hoặc cứ mở lại bảng Sources khi DevTools đang mở. Trình duyệt cho phép tắt điểm dừng hoặc bỏ qua một script, nên đây là sự phiền toái chứ không phải rào chắn, và người chỉ muốn xem console lại nhận về một trang tệ hơn.
Cách thất bại: tab bị dừng có thể do laptop ngủ, thiết bị quá tải hoặc tab nền bị giảm tốc, tất cả đều kéo dài phép đo; và khi điểm dừng bị tắt thì lệnh lại thành thao tác rỗng.
Kỹ thuật 3: getter của console
Khi DevTools mở, in một đối tượng ra khiến console dựng bản xem trước của nó. Trang có thể in một đối tượng có thuộc tính getter và xem getter có chạy không.
let opened = false;
const probe = new Error();
Object.defineProperty(probe, "stack", {
get() { opened = true; return ""; }
});
console.log(probe);
Getter có chạy hay không phụ thuộc trình duyệt, phiên bản và bảng console đang hiển thị; các engine thỉnh thoảng đổi hành vi này, nên kiểm tra từng hiệu quả năm ngoái có thể im lặng hôm nay. Cơ chế Chromium liên quan, nơi một client tự động hóa gắn vào khiến mọi lệnh console.* tuần tự hóa đối số, được giải thích trong hướng dẫn phát hiện CDP; điều cần nhớ ở đây là getter chạy có thể nghĩa là "có người mở console" hoặc "có client giao thức gắn vào", và trang không phân biệt được.
Vì sao đây chỉ là tín hiệu yếu
Mỗi phương pháp trên đều là suy đoán, và mỗi suy đoán đều có lời giải thích vô tội. Lập trình viên web, người kiểm thử, nhà báo xác minh thông tin và người dùng làm theo bài hỗ trợ đều mở DevTools, và site chặn họ sẽ mất khách thật. Trong khi đó, ai quyết tâm xem trang đều có thể tách bảng ra hoặc tắt điểm dừng, nên các kiểm tra này mang tính suy đoán và dễ né. Vì vậy chúng chỉ được dùng như một đặc trưng có trọng số thấp bên cạnh bằng chứng mạnh hơn như tín hiệu hành vi, không bao giờ là phán quyết.
Công cụ của BrowserInsight làm gì
Kiểm tra dấu vân tay hiển thị cờ DevTools "đã mở" hoặc "đã đóng" trong phần chi tiết trình duyệt. Nó chỉ dùng chênh lệch kích thước cửa sổ với ngưỡng 160 px, nên hành xử đúng như mô tả ở trên:
- DevTools gắn vào cửa sổ (cạnh hoặc đáy) bị phát hiện, vì viewport co lại hơn 160 px.
- DevTools tách thành cửa sổ riêng không bị phát hiện.
- Bảng bên lớn của trình duyệt có thể kích hoạt cờ này dù DevTools đang đóng.
Trang phát hiện bot có một dòng "Phát hiện công cụ nhà phát triển" dựa trên cùng ngưỡng chênh lệch 160 px, mức rủi ro thấp. Khi tìm thấy chênh lệch, nó chạy thêm một phép thử getter của console, nhưng phép thử này không bao giờ tự quyết định kết quả. Một dòng riêng "Phát hiện giả lập di động" tìm chế độ thiết bị của DevTools: User-Agent di động trên nền tảng máy tính, hoặc cửa sổ trình duyệt có kích thước không khớp với màn hình điện thoại được báo cáo.
Cả hai kiểm tra đều không dùng lệnh debugger, nên BrowserInsight không bao giờ tạm dừng trang của bạn. Hãy mở công cụ khi DevTools đang gắn vào cửa sổ, rồi khi tách riêng, và xem cờ thay đổi thế nào: nó cho thấy trang có thể suy ra điều gì, chứ không chứng minh được gì.
Câu hỏi thường gặp
Website có thực sự thấy tôi mở DevTools không?
Không trực tiếp. Nó chỉ suy ra từ tác dụng phụ như kích thước viewport đổi hoặc script bị dừng, và suy luận đó thường sai.
Vì sao trang bị đứng khi tôi mở DevTools?
Thường là script gọi debugger trong vòng lặp, nên mỗi lần tiếp tục lại dừng. Tắt điểm dừng trong bảng Sources sẽ chấm dứt các lần dừng.
Phát hiện DevTools có giống phát hiện bot không?
Không. Đây là chuyện người dùng mở trình kiểm tra. Công cụ tự động hóa để lại dấu vết khác, xem phát hiện trình duyệt headless.
Đề xuất đọc thêm
- Phát hiện tự động hóa qua Chrome DevTools Protocol (CDP)
- Kỹ thuật phát hiện bot: Cách nhận diện bot và trình thu thập
- Phát hiện trình duyệt headless: Selenium và Playwright bị lộ như thế nào
- Vân tay qua độ phân giải màn hình: kích thước hiển thị tiết lộ gì
- Phát hiện bot theo hành vi: Chuyển động chuột phi tự nhiên
