爬虫必备技能！开发者工具技巧总结
文章目錄
- 總覽
- 終端模擬
- Network 面板
- Controls 控制器
- Filter 過濾器
- 斷點調(diào)試
- 常規(guī)斷點調(diào)試
- XHR 斷點
- 行為斷點
- 插入 JS
- 打印 windows 對象的值
- 無限 debugger 防調(diào)試
- 中間人攔截替換無限 debug 函數(shù)
- 方法置空
- 解除定時器
- Hook 鉤子
- 配置文件 manifest.json
- header 鉤子
- cookie 鉤子
- 請求鉤子
總覽
瀏覽器開發(fā)者工具在爬蟲中常用來進行簡單的抓包分析、JS逆向調(diào)試，打開方式：
常見禁用開發(fā)者工具手段：https://blog.csdn.net/cplvfx/article/details/108518077
官方文檔：https://developer.chrome.com/docs/devtools/
-
Elements（元素面板）：使用“元素”面板可以通過自由操縱 DOM 和 CSS 來重您網(wǎng)站的布局和設計。
-
Console（控制臺面板）：在開發(fā)期間，可以使用控制臺面板記錄診斷信息，或者使用它作為 shell，在頁面上與 JavaScript 交互。
-
Sources（源代碼面板）：在源代碼面板中設置斷點來調(diào)試 JavaScript ，或者通過 Workspaces（工作區(qū)）連接本地文件來使用開發(fā)者工具的實時編輯器。
-
Network（網(wǎng)絡面板）：從發(fā)起網(wǎng)頁頁面請求 Request 后得到的各個請求資源信息（包括狀態(tài)、資源類型、大小、所用時間等），并可以根據(jù)這個進行網(wǎng)絡性能優(yōu)化。
-
Performance（性能面板）：使用時間軸面板，可以通過記錄和查看網(wǎng)站生命周期內(nèi)發(fā)生的各種事件來提高頁面運行時的性能。
-
Memory（內(nèi)存面板）：分析 web 應用或者頁面的執(zhí)行時間以及內(nèi)存使用情況。
-
Application（應用面板）：記錄網(wǎng)站加載的所有資源信息，包括存儲數(shù)據(jù)（Local Storage、
Session Storage、IndexedDB、Web SQL、Cookies）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式
表等。 -
Security（安全面板）：使用安全面板調(diào)試混合內(nèi)容問題，證書問題等等。
-
Lighthouse（診斷面板）：對當前網(wǎng)頁進行網(wǎng)絡利用情況、網(wǎng)頁性能方面的診斷，并給出一些優(yōu)化
建議。 -
（元素選擇）：可以直接點擊頁面的元素，會自動跳轉(zhuǎn)到對應的源代碼。
-
（終端模擬）：模擬各種終端設備，支持自定義終端。
-
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CAFFU7g4-1627021409575)(https://i.loli.net/2021/07/09/8j2SnU7pocidkh9.png)]（設置）：開發(fā)者工具設置，包括一些外觀、快捷置、終端設備、地理位置設置等。
-
（自定義）：自定義和控制開發(fā)者工具，包括調(diào)整工具的位置、全局搜索、運行命令、其他工具等。
終端模擬
點擊 可以模擬各種終端設備，適合查看手機頁面的數(shù)據(jù)，點擊【More tools】—> 【Sensors】可以模擬終端的地理位置、終端朝向等；工具欄可以選擇要模擬的終端型號，其中 Responsive 是自適應。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BGvKVFR5-1627021409581)(https://i.loli.net/2021/07/09/6StXTABvaLV38MK.png)]
Network 面板
Controls 控制器
-
Preserve log：是否在頁面重加載后，清除請求列表。
-
Disable cache：是否啟用緩存。
-
：是否開啟抓包。
-
：清除請求。
-
：是否隱藏 Filter（過濾器）窗格。
-
：搜索。
-
：Network conditions，網(wǎng)絡條件，允許在各種網(wǎng)絡環(huán)境中測試網(wǎng)站，包括 3G，離線等，還可以自定義限制最大下載和上傳流量。
-
：Import/Export HAR file，導入導出抓包數(shù)據(jù)。
Filter 過濾器
-
Hide data URLs：data URLs 指一些嵌入到文檔中的小型文件，在請求表里面以 data: 開頭的文件就是，如較為常見的 svg 文件。勾選 Hide data URLs復選框即可隱藏此類文件。
-
All：顯示所有請求。
-
XHR：全稱 XMLHttpRequest，是一種創(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：只顯示被阻止的請求。
斷點調(diào)試
常規(guī)斷點調(diào)試
適用于分析關(guān)鍵函數(shù)代碼邏輯
各個選項功能：
-
：執(zhí)行到下一個斷點。
-
：執(zhí)行下一步，不會進入所調(diào)用的函數(shù)內(nèi)部。
-
：進入所調(diào)用的函數(shù)內(nèi)部。
-
：跳出函數(shù)內(nèi)部。
-
：一步步執(zhí)行代碼，遇到有函數(shù)調(diào)用，則進入函數(shù)。
-
：停用斷點。
-
：不要在出現(xiàn)異常時暫停。
-
Breakpoints：可以看到已經(jīng)埋下的斷點。
-
Scope：可以看到當前局部或者全局變量的值，可對值進行修改。
-
Call Stack：可以看到當前代碼調(diào)用的堆棧信息，代碼執(zhí)行順序為由下至上。
XHR 斷點
匹配 url 中關(guān)鍵詞，匹配到則跳轉(zhuǎn)到參數(shù)生成處，適用 于url 中的加密參數(shù)全局搜索搜不到，可采用這種方式攔截。
行為斷點
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 防調(diào)試
某些頁面打開調(diào)試工具會出現(xiàn)無限 debugger 的現(xiàn)象：
中間人攔截替換無限 debug 函數(shù)
查看調(diào)用棧，點擊第二行跳轉(zhuǎn)到原函數(shù)：
可以看到 _0x2ba9bc[_0x20b2('0x79')] 和 _0x2ba9bc[_0x20b2('0x7a')] 分別對應 debu 和 gger，連起來就是 debugger，在本地重寫這個 JS，直接將這兩個值置空：
使用插件 ReRes，編寫規(guī)則，遇到此 JS，就替換成我們本地經(jīng)過修改過的 JS，替換后無限 debugger 就不存在了：
方法置空
直接在 Console 中將無限 debugger 的函數(shù)重寫置空也可以破解無限 debugger，缺點是刷新后失效。
解除定時器
適用于定時器類觸發(fā)的 debug：
for (var i = 1; i < 99999; i++)window.clearInterval(i);Hook 鉤子
鉤子英文 Hook，在 windows 系統(tǒng)中，所有的都是消息，按了一下鍵盤，就是一個消息，Hook 的意思就是勾住，在消息過去之前先把消息勾住，不讓其執(zhí)行，然后自己優(yōu)先處理。也就是這個技術(shù)提供了一個入口，能夠針對不同的消息或者 api 在執(zhí)行前，先執(zhí)行我的操作。“我的操作”就是鉤子函數(shù)。在開發(fā)者工具中以 chrome 插件的方式，在匹配到關(guān)鍵詞處插入斷點。
創(chuàng)建一個文件夾，文件夾中創(chuàng)建一個鉤子函數(shù)文件 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 中關(guān)鍵參數(shù)生成位置，以下代碼演示了當 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 中關(guān)鍵參數(shù)生成位置，以下代碼演示了當 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);請求鉤子
請求鉤子用于定位請求中關(guān)鍵參數(shù)生成位置，以下代碼演示了當請求的 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);總結(jié)
以上是生活随笔為你收集整理的爬虫必备技能！开发者工具技巧总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小浦红贷多久到账 小浦红贷下款要多久
- 下一篇： 兴业银行爱奇艺卡信用卡怎么样 兴业爱奇艺