Why Opening the Browser Developer Tools Gets Detected Instantly

When pressing F12 to open the Developer Tools for debugging, DataDome utilizes specific techniques to detect whether the tools are open. Once detected, access can be blocked directly. This article explains the reasons behind this detection and the technical methods employed.

What are the reasons for being detected?

When the Developer Tools open, the window dimensions change, reducing the available viewport area. Furthermore, if a debugger statement is encountered, program execution pauses, similar to a breakpoint. If this pause duration exceeds a certain threshold, it triggers detection.

What techniques does DataDome use?

1. toString() Method
   Whenever the browser's Developer Tools are opened, it often involves re-invoking the toString() method of objects to print their result to the console. Therefore, if an object is logged to the console during page initialization, and its toString() method is later overridden, invoking this method when the console opens can be detected.

// Example:
function consoleOpenCallback(){
    alert("CONSOLE OPEN");
    return "";
}

!function () {
    let foo = /./;
    console.log(foo);
    foo.toString = consoleOpenCallback;
}()

2. Window Resize Events
   Opening the Developer Tools changes the size of the browser window's viewable area. The outerWidth (the entire browser window width) remains largely constant, but the innerWidth (the viewport width) decreases significantly when the devtools open. A sudden increase in the difference between outerWidth and innerWidth can indicate the devtools have been opened, leading to detection.

3. Debugger Statements
   The debugger statement acts like a programmatic breakpoint. When the Developer Tools are open and this statement is executed, script execution pauses until the user clicks "Resume script execution." The time difference between the pause (caused by debugger) and resumption is measured. If this duration exceeds a predefined limit, it serves as an indicator that the devtools are open.

//Example:
function consoleOpenCallback() {
    alert("CONSOLE OPEN");
}

!function () {
    const handler = setInterval(() => {
        const before = new Date();
        debugger;
        const after = new Date();
        const cost = after.getTime() - before.getTime();
        if (cost > 100) {
            consoleOpenCallback();
            clearInterval(handler)
        }
    }, 1000)
}();