總覽

瀏覽器開發(fā)者工具在爬蟲中常用來進(jìn)行簡單的抓包分析、JS逆向調(diào)試，打開方式：

F12；

快捷鍵 Ctrl+Shift+I；

鼠標(biāo)右鍵檢查或者審查元素；

瀏覽器右上角 — 更多工具 — 開發(fā)者工具

Elements（元素面板）：使用“元素”面板可以通過自由操縱 DOM 和 CSS 來重您網(wǎng)站的布局和設(shè)計(jì)。Console（控制臺(tái)面板）：在開發(fā)期間，可以使用控制臺(tái)面板記錄診斷信息，或者使用它作為 shell，在頁面上與 JavaScript 交互。Sources（源代碼面板）：在源代碼面板中設(shè)置斷點(diǎn)來調(diào)試 JavaScript ，或者通過 Workspaces（工作區(qū)）連接本地文件來使用開發(fā)者工具的實(shí)時(shí)編輯器。Network（網(wǎng)絡(luò)面板）：從發(fā)起網(wǎng)頁頁面請(qǐng)求 Request 后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)、資源類型、大小、所用時(shí)間等），并可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。Performance（性能面板）：使用時(shí)間軸面板，可以通過記錄和查看網(wǎng)站生命周期內(nèi)發(fā)生的各種事件來提高頁面運(yùn)行時(shí)的性能。Memory（內(nèi)存面板）：分析 web 應(yīng)用或者頁面的執(zhí)行時(shí)間以及內(nèi)存使用情況。Application（應(yīng)用面板）：記錄網(wǎng)站加載的所有資源信息，包括存儲(chǔ)數(shù)據(jù)（Local Storage、 Session Storage、IndexedDB、Web SQL、Cookies）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式 表等。Security（安全面板）：使用安全面板調(diào)試混合內(nèi)容問題，證書問題等等。Lighthouse（診斷面板）：對(duì)當(dāng)前網(wǎng)頁進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁性能方面的診斷，并給出一些優(yōu)化 建議。元素選擇：可以直接點(diǎn)擊頁面的元素，會(huì)自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的源代碼終端模擬：模擬各種終端設(shè)備，支持自定義終端。自定義：自定義和控制開發(fā)者工具，包括調(diào)整工具的位置、全局搜索、運(yùn)行命令、其他工具等。

終端模擬

點(diǎn)擊可以模擬各種終端設(shè)備，適合查看手機(jī)頁面的數(shù)據(jù)，點(diǎn)擊【More tools】— 【Sensors】可以模擬終端的地理位置、終端朝向等；工具欄可以選擇要模擬的終端型號(hào)，其中 Responsive 是自適應(yīng)。

Network 面板

展開全文

Controls 控制器

Preserve log：是否在頁面重加載后，清除請(qǐng)求列表。

Disable cache：是否啟用緩存。

是否開啟抓包。

清除請(qǐng)求。

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

搜索。

Network conditions，網(wǎng)絡(luò)條件，允許在各種網(wǎng)絡(luò)環(huán)境中測試網(wǎng)站，包括 3G，離線等，還可以自定義限制最大下載和上傳流量。

Import/Export HAR file，導(dǎo)入導(dǎo)出抓包數(shù)據(jù)。

Filter 過濾器

Hide data URLs：data URLs 指一些嵌入到文檔中的小型文件，在請(qǐng)求表里面以 data: 開頭的文件就是，如較為常見的 svg 文件。勾選 Hide data URLs復(fù)選框即可隱藏此類文件。All：顯示所有請(qǐng)求。XHR：全稱 ，是一種創(chuàng)建 AJAX 請(qǐng)求的 JavaScript API，通常抓取 Ajax 請(qǐng)求可以選擇 XHR。WS：全稱 WebSocket，是 HTML5 開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。Manifest：安卓開發(fā)文件名，屬于 AndroidManifest.xml 文件，在簡單的 Android 系統(tǒng)的應(yīng)用中提出了重要的信息碼。Has blocked cookies：僅顯示具有阻止響應(yīng) cookie 的請(qǐng)求。Blocked Requests：只顯示被阻止的請(qǐng)求。

斷點(diǎn)調(diào)試

常規(guī)斷點(diǎn)調(diào)試

適用于分析關(guān)鍵函數(shù)代碼邏輯

各個(gè)選項(xiàng)功能：

執(zhí)行到下一個(gè)斷點(diǎn)。

執(zhí)行下一步，不會(huì)進(jìn)入所調(diào)用的函數(shù)內(nèi)部。

進(jìn)入所調(diào)用的函數(shù)內(nèi)部。

跳出函數(shù)內(nèi)部。

一步步執(zhí)行代碼，遇到有函數(shù)調(diào)用，則進(jìn)入函數(shù)。

停用斷點(diǎn)。

不要在出現(xiàn)異常時(shí)暫停。

Breakpoints：可以看到已經(jīng)埋下的斷點(diǎn)。

Scope：可以看到當(dāng)前局部或者全局變量的值，可對(duì)值進(jìn)行修改。

Call Stack：可以看到當(dāng)前代碼調(diào)用的堆棧信息，代碼執(zhí)行順序?yàn)橛上轮辽稀?/p>

XHR 斷點(diǎn)

匹配 url 中關(guān)鍵詞，匹配到則跳轉(zhuǎn)到參數(shù)生成處，適用 于url 中的加密參數(shù)全局搜索搜不到，可采用這種方式攔截。

行為斷點(diǎn)

Event Listener Breakpoints，事件偵聽器斷點(diǎn)，當(dāng)鼠標(biāo)點(diǎn)擊、移動(dòng)、鍵盤按鍵等行為或者其他事件發(fā)生時(shí)可以觸發(fā)斷點(diǎn)，比如 Mouse — click，可快速定位點(diǎn)擊按鈕后，所執(zhí)行的 JS。

插入 JS

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

打印 windows 對(duì)象的值

在 console 中輸入如下代碼，如只打印 _$ 開頭的變量值：

for (var p in window) {

if (p.substr(0, 2) !== "_$")

continue;

console.log(p + " " + eval(p))

}

無限 debugger 防調(diào)試

某些頁面打開調(diào)試工具會(huì)出現(xiàn)無限 debugger 的現(xiàn)象：

中間人攔截替換無限 debug 函數(shù)

查看調(diào)用棧，點(diǎn)擊第二行跳轉(zhuǎn)到原函數(shù)：

可以看到 _0x2ba9bc[_0x20b2('0x79')] 和 _0x2ba9bc[_0x20b2('0x7a')] 分別對(duì)應(yīng) debu 和 gger，連起來就是 debugger，在本地重寫這個(gè) JS，直接將這兩個(gè)值置空：

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

方法置空

直接在 Console 中將無限 debugger 的函數(shù)重寫置空也可以破解無限 debugger，缺點(diǎn)是刷新后失效。

解除定時(shí)器

適用于定時(shí)器類觸發(fā)的 debug：

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

Hook 鉤子

鉤子英文 Hook，在 windows 系統(tǒng)中，所有的都是消息，按了一下鍵盤，就是一個(gè)消息，Hook 的意思就是勾住，在消息過去之前先把消息勾住，不讓其執(zhí)行，然后自己優(yōu)先處理。也就是這個(gè)技術(shù)提供了一個(gè)入口，能夠針對(duì)不同的消息或者 api 在執(zhí)行前，先執(zhí)行我的操作。“我的操作”就是鉤子函數(shù)。在開發(fā)者工具中以 chrome 插件的方式，在匹配到關(guān)鍵詞處插入斷點(diǎn)。

創(chuàng)建一個(gè)文件夾，文件夾中創(chuàng)建一個(gè)鉤子函數(shù)文件 inject.js 以及插件的配置文件 manifest.json ：

打開 chrome 的擴(kuò)展程序, 打開開發(fā)者模式，加載已解壓的擴(kuò)展程序，選擇創(chuàng)建的文件夾即可：

配置文件 manifest.json

以一個(gè) 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 中關(guān)鍵參數(shù)生成位置，以下代碼演示了當(dāng) header 中包含 Authorization 時(shí)，則插入斷點(diǎn)

var code = function(){

var org = window..prototype.setRequestHeader;

window..prototype.setRequestHeader = function(key,value){

if(key=='Authorization'){

debugger;

}

return org.apply(this,arguments);

}

}

var script = document.('script');

script.textContent = '(' + code + ')()';

(document.head||document.documentElement).(script);

script.parentNode.removeChild(script);

cookie 鉤子

cookie 鉤子用于定位 cookie 中關(guān)鍵參數(shù)生成位置，以下代碼演示了當(dāng) cookie 中匹配到了 abcdefghijk， 則插入斷點(diǎn)：

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.('script');

script.textContent = '(' + code + ')()';

(document.head||document.documentElement).(script);

script.parentNode.removeChild(script);

請(qǐng)求鉤子

請(qǐng)求鉤子用于定位請(qǐng)求中關(guān)鍵參數(shù)生成位置，以下代碼演示了當(dāng)請(qǐng)求的 url 里包含 AbCdE 時(shí)，則插入斷點(diǎn)：

var code = function(){

var open = window..prototype.open;

window..prototype.open = function (method, url, async){

if (url.indexOf("AbCdE")-1){

debugger;

}

return open.apply(this, arguments);

};

}

var script = document.('script');

script.textContent = '(' + code + ')()';

(document.head||document.documentElement).(script);

script.parentNode.removeChild(script);