【爬蟲知識】浏覽器開發者工具使用技巧總結

總覽

浏覽器開發者工具在爬蟲中常用來進行簡單的抓包分析、JS逆向調試，打開方式：

1. F12；
2. 快捷鍵 Ctrl+Shift+I；
3. 滑鼠右鍵檢查或者審查元素；
4. 浏覽器右上角 —> 更多工具 —> 開發者工具

常見禁用開發者工具手段：

https://blog.csdn.net/cplvfx/article/details/108518077

官方文檔：

https://developer.chrome.com/docs/devtools/

• Elements（元素面闆）：使用“元素”面闆可以通過自由操縱 DOM 和 CSS 來重您網站的布局和設計。
• Console（控制台面闆）：在開發期間，可以使用控制台面闆記錄診斷資訊，或者使用它作為 shell，在頁面上與 JavaScript 互動。
• Sources（源代碼面闆）：在源代碼面闆中設定斷點來調試 JavaScript ，或者通過 Workspaces（工作區）連接配接本地檔案來使用開發者工具的實時編輯器。
• Network（網絡面闆）：從發起網頁頁面請求 Request 後得到的各個請求資源資訊（包括狀态、資源類型、大小、所用時間等），并可以根據這個進行網絡性能優化。
• Performance（性能面闆）：使用時間軸面闆，可以通過記錄和檢視網站生命周期内發生的各種事件來提高頁面運作時的性能。
• Memory（記憶體面闆）：分析 web 應用或者頁面的執行時間以及記憶體使用情況。
• Application（應用面闆）：記錄網站加載的所有資源資訊，包括存儲資料（Local Storage、

Session Storage、IndexedDB、Web SQL、Cookies）、緩存資料、字型、圖檔、腳本、樣式

表等。

• Security（安全面闆）：使用安全面闆調試混合内容問題，證書問題等等。
• Lighthouse（診斷面闆）：對目前網頁進行網絡利用情況、網頁性能方面的診斷，并給出一些優化

建議。

• 

  （元素選擇）：可以直接點選頁面的元素，會自動跳轉到對應的源代碼。

• 

  （終端模拟）：模拟各種終端裝置，支援自定義終端。

• 

  （設定）：開發者工具設定，包括一些外觀、快捷置、終端裝置、地理位置設定等。

• 

  （自定義）：自定義和控制開發者工具，包括調整工具的位置、全局搜尋、運作指令、其他工具等。

終端模拟

點選

可以模拟各種終端裝置，适合檢視手機頁面的資料，點選【More tools】—> 【Sensors】可以模拟終端的地理位置、終端朝向等；工具欄可以選擇要模拟的終端型号，其中 Responsive 是自适應。

Network 面闆

Controls 控制器

• Preserve log：是否在頁面重加載後，清除請求清單。
• Disable cache：是否啟用緩存。

• 

  ：是否開啟抓包。

• 

  ：清除請求。

• 

  ：是否隐藏 Filter（過濾器）窗格。

• 

  ：搜尋。

• 

  ：Network conditions，網絡條件，允許在各種網絡環境中測試網站，包括 3G，離線等，還可以自定義限制最大下載下傳和上傳流量。

• 

  ：Import/Export HAR file，導入導出抓包資料。

Filter 過濾器

• Hide data URLs：data URLs 指一些嵌入到文檔中的小型檔案，在請求表裡面以 data: 開頭的檔案就是，如較為常見的 svg 檔案。勾選 Hide data URLs複選框即可隐藏此類檔案。
• All：顯示所有請求。
• XHR：全稱 XMLHttpRequest，是一種建立 AJAX 請求的 JavaScript API，通常抓取 Ajax 請求可以選擇 XHR。
• WS：全稱 WebSocket，是 HTML5 開始提供的一種在單個 TCP 連接配接上進行全雙工通訊的協定。
• Manifest 安卓開發檔案名，屬于 AndroidManifest.xml 檔案，在簡單的 Android 系統的應用中提出了重要的資訊碼。
• Has blocked cookies：僅顯示具有阻止響應 cookie 的請求。
• Blocked Requests：隻顯示被阻止的請求。

斷點調試

正常斷點調試

适用于分析關鍵函數代碼邏輯

1. Ctrl+Shift+F 或者右上角三個點打開全局搜尋，搜尋關鍵字。
2. 定位到可疑代碼，點選行号埋下斷點。
3. 調試代碼，分析邏輯，其中 console 模闆可以直接編寫 JS 代碼進行調試。

各個選項功能：

• 

  ：執行到下一個斷點。

• 

  ：執行下一步，不會進入所調用的函數内部。

• 

  ：進入所調用的函數内部。

• 

  ：跳出函數内部。

• 

  ：一步步執行代碼，遇到有函數調用，則進入函數。

• 

  ：停用斷點。

• 

  ：不要在出現異常時暫停。
• Breakpoints：可以看到已經埋下的斷點。
• Scope：可以看到目前局部或者全局變量的值，可對值進行修改。
• Call Stack：可以看到目前代碼調用的堆棧資訊，代碼執行順序為由下至上。

XHR 斷點

比對 url 中關鍵詞，比對到則跳轉到參數生成處，适用 于url 中的加密參數全局搜尋搜不到，可采用這種方式攔截。

行為斷點

Event Listener Breakpoints，事件偵聽器斷點，當滑鼠點選、移動、鍵盤按鍵等行為或者其他事件發生時可以觸發斷點，比如 Mouse —> click，可快速定位點選按鈕後，所執行的 JS。

插入 JS

在 sources —> snippets 下可以建立 JS 腳本。

列印 windows 對象的值

在 console 中輸入如下代碼，如隻列印

_$

開頭的變量值：

for (var p in window) {
    if (p.substr(0, 2) !== "_$") 
        continue;
    console.log(p + " >>> " + eval(p))
}           

無限 debugger 防調試

某些頁面打開調試工具會出現無限 debugger 的現象：

中間人攔截替換無限 debug 函數

檢視調用棧，點選第二行跳轉到原函數：

可以看到

_0x2ba9bc[_0x20b2('0x79')]

和

_0x2ba9bc[_0x20b2('0x7a')]

分别對應 debu 和 gger，連起來就是 debugger，在本地重寫這個 JS，直接将這兩個值置空：

使用插件 ReRes，編寫規則，遇到此 JS，就替換成我們本地經過修改過的 JS，替換後無限 debugger 就不存在了：

方法置空

直接在 Console 中将無限 debugger 的函數重寫置空也可以破解無限 debugger，缺點是重新整理後失效。

解除定時器

适用于定時器類觸發的 debug：

for (var i = 1; i < 99999; i++)window.clearInterval(i);           

Hook 鈎子

鈎子英文 Hook，在 windows 系統中，所有的都是消息，按了一下鍵盤，就是一個消息，Hook 的意思就是勾住，在消息過去之前先把消息勾住，不讓其執行，然後自己優先處理。也就是這個技術提供了一個入口，能夠針對不同的消息或者 api 在執行前，先執行我的操作。“我的操作”就是鈎子函數。在開發者工具中以 chrome 插件的方式，在比對到關鍵詞處插入斷點。

建立一個檔案夾，檔案夾中建立一個鈎子函數檔案 inject.js 以及插件的配置檔案 manifest.json ：

打開 chrome 的擴充程式, 打開開發者模式，加載已解壓的擴充程式，選擇建立的檔案夾即可：

配置檔案 manifest.json

以一個 header 鈎子為例，其配置檔案如下：

{
   "name": "Injection",
    "version": "1.0",
    "description": "RequestHeader鈎子",
    "manifest_version": 1,
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "inject.js"
            ],
            "all_frames": true,
            "permissions": [
                "tabs"
            ],
            "run_at": "document_start"
        }
    ]
}           

header 鈎子

header 鈎子用于定位 header 中關鍵參數生成位置，以下代碼示範了當 header 中包含

Authorization

時，則插入斷點

var code = function(){
var org = window.XMLHttpRequest.prototype.setRequestHeader;
window.XMLHttpRequest.prototype.setRequestHeader = function(key,value){
    if(key=='Authorization'){
        debugger;
    }
    return org.apply(this,arguments);
}
}
var script = document.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);           

cookie 鈎子

cookie 鈎子用于定位 cookie 中關鍵參數生成位置，以下代碼示範了當 cookie 中比對到了

abcdefghijk

， 則插入斷點：

var code = function(){
    var org = document.cookie.__lookupSetter__('cookie');
    document.__defineSetter__("cookie",function(cookie){
        if(cookie.indexOf('abcdefghijk')>-1){
            debugger;
        }
        org = cookie;
    });
    document.__defineGetter__("cookie",function(){return org;});
}
var script = document.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);           

請求鈎子

請求鈎子用于定位請求中關鍵參數生成位置，以下代碼示範了當請求的 url 裡包含

AbCdE

時，則插入斷點：

var code = function(){
var open = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function (method, url, async){
    if (url.indexOf("AbCdE")>-1){
        debugger;
    }
    return open.apply(this, arguments);
};
}
var script = document.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(script);
script.parentNode.removeChild(script);