How to Block Debugger and Prevent Frontend Code Inspection

Why forbid debugging?

Front‑end pages call many APIs; attackers can scrape and crack them to obtain data.

The simplest way to stop this is to prevent users from debugging the front‑end code.

Infinite debugger

Developers insert repeated debugger statements (e.g., via setInterval) so that when the console is open the debugger executes and blocks normal breakpoints.

Because the program is constantly halted by debugger, network requests become invisible.

Basic implementation:

/** Basic anti‑debug code */
(() => {
    function ban() {
        setInterval(() => {
            debugger;
        }, 50);
    }
    try {
        ban();
    } catch (err) {}
})();

Countermeasures to infinite debugger

Use the “Deactivate breakpoints” button or shortcut Ctrl+F8 to stop the endless debugger, but this does not allow adding breakpoints manually.

Writing the setInterval code on a single line or setting logpoint to false makes it harder for technical users.

Countermeasures to forbid breakpoints

Even if the code is compressed into one line, developers can still add breakpoints.

Ignoring execution code

Add scripts to an ignore list to skip execution of specific lines or files, which also prevents the infinite debugger.

Countermeasure for ignored execution

Rewrite debugger as Function("debugger")(), which creates a temporary JS file each execution.

For stronger protection, encrypt the script before deployment.

// Before encryption
(() => {
    function ban() {
        setInterval(() => {
            Function('debugger')();
        }, 50);
    }
    try { ban(); } catch (err) {}
})();

// After encryption (obfuscated)
eval(function(c,g,a,b,d,e){...});

Ultimate enhanced anti‑debug code

Replace Function('debugger').call() with

(function(){return false;})['constructor']('debugger')['call']()

for deeper obfuscation.

Add a window size check; if the difference between outer and inner dimensions exceeds a threshold, replace the page body with a warning message.

Encrypt the final script for maximum safety.

(() => {
    function block() {
        if (window.outerHeight - window.innerHeight > 200 ||
            window.outerWidth - window.innerWidth > 200) {
            document.body.innerHTML = "Detected illegal debugging, please close and refresh!";
        }
        setInterval(() => {
            (function(){return false;})['constructor']('debugger')['call']();
        }, 50);
    }
    try { block(); } catch (err) {}
})();

Original article: https://juejin.cn/post/7262175454714626108