參考:https://segmentfault.com/a/1190000012359015
原文地址: 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的情況