🎈 為啥要禁止？

• 由於前端頁面會調用很多接口，有些接口會被別人爬蟲分析，破解後獲取數據
• 為了 杜絕 這種情況，最簡單的方法就是禁止人家調試自己的前端代碼

🎈 無限 debugger

• 前端頁面防止調試的方法主要是通過不斷 debugger 來瘋狂輸出斷點，因為 debugger 在控制枱被打開的時候就會執行
• 由於程序被 debugger 阻止，所以無法進行斷點調試，所以網頁的請求也是看不到的
• 基礎代碼如下：

/**
* 基礎禁止調試代碼
*/
(() => {
    function ban() {
      setInterval(() => {
        debugger;
      }, 50);
    }
    try {
      ban();
    } catch (err) { }
})();

🎈 無限 debugger 的對策

• 如果僅僅是加上面那麼簡單的代碼，對於一些技術人員而言作用不大
• 可以通過控制枱中的 Deactivate breakpoints 按鈕或者使用快捷鍵 Ctrl + F8 關閉無限 debugger
• 這種方式雖然能去掉礙眼的 debugger，但是無法通過左側的行號添加 breakpoint

🎈 禁止斷點的對策

• 如果將 setInterval 中的代碼寫在一行，就能禁止用户斷點，即使添加 logpoint 為 false 也無用
• 當然即使有些人想到用左下角的格式化代碼，將其變成多行也是沒用的

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

🎈 忽略執行的代碼

• 通過添加 add script ignore list 需要忽略執行代碼行或文件
• 也可以達到禁止無限 debugger

🎈 忽略執行代碼的對策

• 那如何針對上面操作的惡意用户呢
• 可以通過將 debugger 改寫成 Function("debugger")(); 的形式來應對
• Function 構造器生成的 debugger 會在每一次執行時開啓一個臨時 js 文件
• 當然使用的時候，為了更加的安全，最好使用加密後的腳本

// 加密前
(() => {
  function ban() {
    setInterval(() => {
      Function('debugger')();
    }, 50);
  }
  try {
    ban();
  } catch (err) { }
})();

// 加密後
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,{}));

🎈 終極增強防調試代碼

• 為了讓自己寫出來的代碼更加的晦澀難懂，需要對上面的代碼再優化一下
• 將 Function('debugger').call() 改成 (function(){return false;})['constructor']('debugger')['call']();
• 並且添加條件，當窗口外部寬高和內部寬高的差值大於一定的值 ，我把 body 裏的內容換成指定內容
• 當然使用的時候，為了更加的安全，最好加密後再使用

(() => {
  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) { }
})();