一、前言

　　在我們爬取某些網站的時候，會想要開啟 DevTools 檢視元素或者抓包分析，但按下 F12 的時候，卻出現了下面這一幕：

　　

 　　此時網頁暫停載入，也就沒法執行程式碼了，直接中斷掉了，難道這就能阻止我們爬取了？不存在的，還是會有解決方案的。至於怎麼做，請慢慢往下看。

 

二、除錯

　　我們在瞭解程式碼的功能的時候，一般使用 JavaScript 除錯工具（例如 DevTools）通過設定斷點的方式來中斷或阻止指令碼程式碼的執行，而斷點也是程式碼除錯中最基本的了。

　　在 Chrome 中開啟 DevTools，切換到 Source 選項，找到 JS 檔案並開啟，左下角有一個“{}”代表格式化檔案，可以更方便地檢視程式碼。然後就是設定斷點了，找到可能出現問題的地方打上斷點，再重新整理頁面，就可以直接滑鼠移動到相關變數名或者方法上面檢視它的值。如果想在執行到斷點位置執行其它邏輯，可以直接在console區域執行相關指令碼。

 

三、反除錯

　　反除錯就是在開啟 DevTools 的時候，就會出現“Paused in debugger”，這個 debugger 導致我們無法除錯 JS。

　　在反除錯中，有時候會將函式進行重定義，並且改變其行為，就會將某些資訊隱藏起來或者改變其中的一部分資訊。

　　除了進行重定義，有的會進行混淆，例如使用語法樹，還有的會進行加密，例如"_0x5219a6"這樣的變數名，能很好地隱藏資訊。

 

四、示例1

1.問題分析

　　一種簡單的反除錯措施是通過在程式碼中新增 debugger 實現，通過 debugger 阻止非法使用者除錯程式碼，讓其陷入死迴圈，甚至有的還會使用匿名函式，例如：

setInterval(function() {     debugger }, 100);

　　開啟 DevTools 時就會出現“Paused in debugger”，網頁也就載入中斷了。

2.解決方案

　　這種問題解決起來還是很容易的，總結起來就是四個字：禁止斷點。

　　在 Source 頁面右側按鈕找到“Deactivate breakpoints”，或者使用快捷鍵 Ctrl + F8，如下圖：

 　　

　　除了這種解決方案，還可以找到 debugger 那一行，然後右鍵選擇“Never pause here”，就會出現一盒黃色的箭頭，如下圖：

　　

　　設定完之後，繼續執行程式碼就行了。

　　不過這種方案和程式碼的編寫風格有關係，例如下面這種情況，設定“Never pause here”就沒用了。

　　

 

五、示例2

1.問題分析

　　複雜一點的反除錯措施就不是直接在程式碼中加入 debugger 了，而是將其隱藏起來，這樣就不會很輕易地被人發現了，例如下面這段程式碼：

function t() {     try {         var a = ["r", "e", "g", "g", "u", "b", "e", "d"].reverse().join("");         ! function e(n) {             (1 !== ("" + n / n).length || 0 === n) && function() {}             .constructor(a)(),             e(++n)         }(0)     } catch (a) {         setTimeout(t, 500)     } }

　　這段程式碼首先是設定變數 a 表示字串“debugger”，然後使用 constructor() 來實現呼叫 debugger 方法，再使用 setTimeout 實現每0.5秒中斷一次。

2.解決方案

　　將反除錯具名函式重新定義一遍，然後重新開啟 DevTools，就能進行除錯了。對於上面的例子，可以在控制檯中輸入以下內容：

t = function() {}

　　通過下面的截圖可以發現我們確實已經修改了對於 t 的定義，因而也就不會進入 debugger 了：

　　

相關推薦