文章目錄

• • 總覽
  • 終端模擬
  • Network 面板
  • • Controls 控制器
    • Filter 過(guò)濾器
  • 斷點(diǎn)調(diào)試
  • • 常規(guī)斷點(diǎn)調(diào)試
    • XHR 斷點(diǎn)
    • 行為斷點(diǎn)
  • 插入 JS
  • 打印 windows 對(duì)象的值
  • 無(wú)限 debugger 防調(diào)試
  • • 中間人攔截替換無(wú)限 debug 函數(shù)
    • 方法置空
    • 解除定時(shí)器
  • Hook 鉤子
  • • 配置文件 manifest.json
    • header 鉤子
    • cookie 鉤子
    • 請(qǐng)求鉤子

---

總覽

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

F12；

快捷鍵 Ctrl+Shift+I；

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

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

常見(jiàn)禁用開(kāi)發(fā)者工具手段：https://blog.csdn.net/cplvfx/article/details/108518077

官方文檔：https://developer.chrome.com/docs/devtools/

• Elements（元素面板）：使用“元素”面板可以通過(guò)自由操縱 DOM 和 CSS 來(lái)重您網(wǎng)站的布局和設(shè)計(jì)。

• Console（控制臺(tái)面板）：在開(kāi)發(fā)期間，可以使用控制臺(tái)面板記錄診斷信息，或者使用它作為 shell，在頁(yè)面上與 JavaScript 交互。

• Sources（源代碼面板）：在源代碼面板中設(shè)置斷點(diǎn)來(lái)調(diào)試 JavaScript ，或者通過(guò) Workspaces（工作區(qū)）連接本地文件來(lái)使用開(kāi)發(fā)者工具的實(shí)時(shí)編輯器。

• Network（網(wǎng)絡(luò)面板）：從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求 Request 后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)、資源類(lèi)型、大小、所用時(shí)間等），并可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。

• Performance（性能面板）：使用時(shí)間軸面板，可以通過(guò)記錄和查看網(wǎng)站生命周期內(nèi)發(fā)生的各種事件來(lái)提高頁(yè)面運(yùn)行時(shí)的性能。

• Memory（內(nèi)存面板）：分析 web 應(yīng)用或者頁(yè)面的執(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)容問(wèn)題，證書(shū)問(wèn)題等等。

• Lighthouse（診斷面板）：對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁(yè)性能方面的診斷，并給出一些優(yōu)化
  建議。

• （元素選擇）：可以直接點(diǎn)擊頁(yè)面的元素，會(huì)自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的源代碼。

• （終端模擬）：模擬各種終端設(shè)備，支持自定義終端。

• [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-CAFFU7g4-1627021409575)(https://i.loli.net/2021/07/09/8j2SnU7pocidkh9.png)]（設(shè)置）：開(kāi)發(fā)者工具設(shè)置，包括一些外觀、快捷置、終端設(shè)備、地理位置設(shè)置等。

• （自定義）：自定義和控制開(kāi)發(fā)者工具，包括調(diào)整工具的位置、全局搜索、運(yùn)行命令、其他工具等。

---

終端模擬

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

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-BGvKVFR5-1627021409581)(https://i.loli.net/2021/07/09/6StXTABvaLV38MK.png)]

---

Network 面板

Controls 控制器

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

• Disable cache：是否啟用緩存。

• ：是否開(kāi)啟抓包。

• ：清除請(qǐng)求。

• ：是否隱藏 Filter（過(guò)濾器）窗格。

• ：搜索。

• ：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 過(guò)濾器

• Hide data URLs：data URLs 指一些嵌入到文檔中的小型文件，在請(qǐng)求表里面以 data: 開(kāi)頭的文件就是，如較為常見(jiàn)的 svg 文件。勾選 Hide data URLs復(fù)選框即可隱藏此類(lèi)文件。

• All：顯示所有請(qǐng)求。

• XHR：全稱(chēng) XMLHttpRequest，是一種創(chuàng)建 AJAX 請(qǐng)求的 JavaScript API，通常抓取 Ajax 請(qǐng)求可以選擇 XHR。

• WS：全稱(chēng) WebSocket，是 HTML5 開(kāi)始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議。

• Manifest 安卓開(kāi)發(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)打開(kāi)全局搜索，搜索關(guān)鍵字。

定位到可疑代碼，點(diǎn)擊行號(hào)埋下斷點(diǎn)。

調(diào)試代碼，分析邏輯，其中 console 模板可以直接編寫(xiě) 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，事件偵聽(tīng)器斷點(diǎn)，當(dāng)鼠標(biāo)點(diǎn)擊、移動(dòng)、鍵盤(pán)按鍵等行為或者其他事件發(fā)生時(shí)可以觸發(fā)斷點(diǎn)，比如 Mouse —> click，可快速定位點(diǎn)擊按鈕后，所執(zhí)行的 JS。

---

插入 JS

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

---

打印 windows 對(duì)象的值

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

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

無(wú)限 debugger 防調(diào)試

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

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

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

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

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

方法置空

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

解除定時(shí)器

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

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

---

Hook 鉤子

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

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

打開(kāi) chrome 的擴(kuò)展程序, 打開(kāi)開(kāi)發(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);

總結(jié)

以上是生活随笔為你收集整理的爬虫必备技能！开发者工具技巧总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。