突破前端反調試--阻止頁面不斷debugger
原文地址： https://segmentfault.com/a/11...
問題復現
一次扒某網站的前端代碼，打開控制檯要看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了:
有的網站做的比較簡單，是用具名函數做的，類似這樣
setInterval(startDebug, 100); // 舉個例子而已，很多網站並不是這麼實現的
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的情況
