總覽

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

F12；

快捷鍵 Ctrl+Shift+I；

鼠標右鍵檢查或者審查元素；

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

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

終端模擬

點擊可以模擬各種終端設備，適合查看手機頁面的數據，點擊【More tools】— 【Sensors】可以模擬終端的地理位置、終端朝向等；工具欄可以選擇要模擬的終端型號，其中 Responsive 是自適應。

Network 面板

展開全文

Controls 控制器

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

Disable cache：是否啟用緩存。

是否開啟抓包。

清除請求。

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

搜索。

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

Import/Export HAR file，導入導出抓包數據。

Filter 過濾器

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

斷點調試

常規(guī)斷點調試

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

各個選項功能：

執(zhí)行到下一個斷點。

執(zhí)行下一步，不會進入所調用的函數內部。

進入所調用的函數內部。

跳出函數內部。

一步步執(zhí)行代碼，遇到有函數調用，則進入函數。

停用斷點。

不要在出現異常時暫停。

Breakpoints：可以看到已經埋下的斷點。

Scope：可以看到當前局部或者全局變量的值，可對值進行修改。

Call Stack：可以看到當前代碼調用的堆棧信息，代碼執(zhí)行順序為由下至上。

XHR 斷點

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

行為斷點

Event Listener Breakpoints，事件偵聽器斷點，當鼠標點擊、移動、鍵盤按鍵等行為或者其他事件發(fā)生時可以觸發(fā)斷點，比如 Mouse — click，可快速定位點擊按鈕后，所執(zhí)行的 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，編寫規(guī)則，遇到此 JS，就替換成我們本地經過修改過的 JS，替換后無限 debugger 就不存在了：

方法置空

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

解除定時器

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

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

Hook 鉤子

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

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

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

配置文件 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..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 中關鍵參數生成位置，以下代碼演示了當 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.('script');

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

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

script.parentNode.removeChild(script);

請求鉤子

請求鉤子用于定位請求中關鍵參數生成位置，以下代碼演示了當請求的 url 里包含 AbCdE 時，則插入斷點：

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);