Do Not Allow Others to Debug Their Own Front-end Page Code.

Since front-end pages will call many interfaces, some of which may be analyzed by others’ web crawlers and cracked to obtain data, To prevent this situation, the simplest method is to prohibit others from debugging their front-end code.

Infinite debugger

The main method to prevent debugging on the front-end page is to continuously output breakpoints using debugger, because debugger will execute when the console is opened.
Due to being blocked by the debugger, breakpoint debugging cannot be performed, so the webpage’s requests are also invisible. The basic code is as follows:

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

Countermeasures for Infinite Debugger

If only adding such simple code, it is not very effective for some technical personnel.
You can deactivate breakpoints by clicking the “Deactivate breakpoints” button in the console or using the shortcut Ctrl + F8 to close the infinite debugger.
Although this method can remove annoying debuggers, it cannot add breakpoints through line numbers on the left.

Countermeasures against breakpoints are prohibited

If the code in setInterval is written on one line, it can prevent users from setting breakpoints, even if logpoint is set to false.
Of course, it is useless to format the code into multiple lines using the bottom left corner method.

(() => {
  function ban() {
    setInterval(() => { debugger; }, 50);
  }
  try {
    ban();
  } catch (err) { }
})();

Ignore the code being executed

By adding add script ignore list, you can ignore the execution of specific lines or files.
This can also achieve the purpose of disabling infinite debugger.

Ignore the countermeasures for executing code

How to deal with malicious users who perform the above operations?
You can respond by rewriting the debugger as Function(“debugger”)();
The debugger generated by the Function constructor will open a temporary js file every time it is executed.
Of course, when using it, for better security, it is best to use encrypted scripts.

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

// After encryption
eval(function(c,g,a,b,d,e){d=String;if(!"".replace(/^/,String)){for(;a--;)e[a]=b[a]||a;b=[function(f){return e[f]}];d=function(){return"\w+"};a=1}for(;a--;)b[a]&&(c=c.replace(new RegExp("\b"+d(a)+"\b","g"),b[a]));return c}('(()=>{1 0(){2(()=>{3("4")()},5)}6{0()}7(8){}})();',9,9,"block function setInterval Function debugger 50 try catch err".split(" "),0,{}));

Ultimate enhanced anti-debugging code

In order to make the code I write more obscure and difficult to understand, it needs further optimization.
Change Function(‘debugger’).call() to (function(){return false;})[‘constructor’](‘debugger’)[‘call’]();
And add a condition: when the difference between the external width and height of the window and the internal width and height exceeds a certain value, I replace the content in body with specified content.
Of course, when using it, for better security, it is best to encrypt it before use.

(() => {
  function block() {
    if (window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200) {
      document.body.innerHTML = "检测到非法调试,请关闭后刷新重试!";
    }
    setInterval(() => {
      (function () {
        return false;
      }
      ['constructor']('debugger')
      ['call']());
    }, 50);
  }
  try {
    block();
  } catch (err) { }
})();

Make a little joke, thank you all for watching.