突破前端反調試--阻止頁面不斷debugger

問題復現

一次扒某網站的前端代碼，打開控制檯要看Network，結果發現他們頁面一打開控制檯就不斷的debugger，100ms一次，很影響看頁面內容。就像下面這樣的

問題分析

每次在斷點處停下來的時候頁面都會跳到source這個tab頁面，也可以看到他的debugger的代碼，其實他的實現很簡單，只有這一行代碼

(function() {var a = new Date(); debugger; return new Date() - a > 100;}())

雖然簡單，可是卻頗有效。

• 不停地打斷你，頁面跳到source頁面，阻止你看他代碼不
• 斷的產生不可回收的對象，佔據你的內存，形成內存泄漏，沒過多久瀏覽器就會卡頓

因此他帶來的影響仍是挺大的，咱們須要解決這個問題。

問題解決

這個問題解決起來仍是蠻簡單的，問題解決只須要一句話：禁止斷點。
而對應的操做是在Chrome控制檯的Source Tab頁點擊Deactivate breakpoints按鈕或者按下Ctrl + f8(下圖)。

這樣就能禁用斷點了，問題就獲得瞭解決，可是當你須要調試的時候記得要起他哦。很簡單的操做，可是你若是對Chrome控制檯調試不熟悉的話仍是比較頭疼的。在這裏記錄一下，分享給更多的人。

更新

2018-09-10更新

後來發現這種作法有時候有些不妥，就好比有咱們看別人網站代碼有時候就是爲了調試網站的代碼，那麼這時咱們這麼直接乾脆的禁止斷點後咱們也沒辦法調試網站的代碼了，那這就有點殺敵一千自損八百的意思。那有什麼辦法能夠知足咱們既能阻止網站一直debugger還能讓咱們繼續調試網站的代碼呢？這就要看網站怎麼實現不斷debugger了:
有的網站作的比較簡單，是用具名函數作的，相似這樣

1. setInterval(startDebug, 100); // 舉個例子而已，不少網站並非這麼實現的

2. function startDebug() { debugger; };

這種狀況比較好解決，咱們隨便從新定義這個方法就好了，形如:

function startDebug() {};

可是也有的網站作的比較厲害點，用匿名函數來實現，形如:

setInterval(function () { debugger }, 100); // 舉個例子而已，不少網站並非這麼實現的

這種狀況就比較蛋疼了，目前我是沒啥解決方法，若是有人知道的話，不妨在下面留言了。

2019-03-13更新

下面有位老兄(@XYShaoKang)提到用條件斷點來應對這樣的實現

setInterval(function () { debugger }, 100); // 舉個例子而已，不少網站並非這麼實現的

我試了下，確實能夠，可是有侷限性。
先說能夠應對的狀況，一個動圖說明問題。

再來講說不能應對的狀況，仍是一個動圖說明問題。

也就是說，條件端點的適用狀況與具體代碼的書寫風格有關係。
另外，我發現Add conditional breakpoint下面的Never pause here也能在突破反調試的時候也能起到必定做用。侷限性與上Add conditional breakpoint同樣。
一樣用兩個動圖說明問題。

能work的狀況

不能work的狀況