總覽

瀏覽器開發(fā)者工具在爬蟲中常用來進(jìn)行簡(jiǎ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)境中測(cè)試網(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：全稱 XMLHttpRequest，是一種創(chuàng)建 AJAX 請(qǐng)求的 JavaScript API，通常抓取 Ajax 請(qǐng)求可以選擇 XHR。
• WS：全稱 WebSocket，是 HTML5 開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。
• Manifest：安卓開發(fā)文件名，屬于 AndroidManifest.xml 文件，在簡(jiǎn)單的 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ù)代碼邏輯

• Ctrl+Shift+F 或者右上角三個(gè)點(diǎn)打開全局搜索，搜索關(guān)鍵字。
• 定位到可疑代碼，點(diǎn)擊行號(hào)埋下斷點(diǎn)。
• 調(diào)試代碼，分析邏輯，其中 console 模板可以直接編寫 JS 代碼進(jìn)行調(diào)試。

各個(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.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 中關(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.createElement('script');
script.textContent = '(' + code + ')()';
(document.head||document.documentElement).appendChild(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.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);

看到這里，給個(gè)在看不過分吧