瀏覽器開發者工具使用技巧一覽

作者：K小哥 2022-07-08 15:01:40

開發開發工具

本文主要介紹了瀏覽器開發者的工具使用技巧，一起里看看你把。

總覽

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

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

終端模擬

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

Network 面板

Controls 控制器

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

Disable cache：是否啟用緩存。

是否開啟抓包。

清除請求。

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

搜索。

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

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

Filter 過濾器

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

斷點調試

常規斷點調試

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

Ctrl+Shift+F 或者右上角三個點打開全局搜索，搜索關鍵字。
定位到可疑代碼，點擊行號埋下斷點。
調試代碼，分析邏輯，其中 console 模板可以直接編寫 JS 代碼進行調試。

各個選項功能：

執行到下一個斷點。

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

進入所調用的函數內部。

跳出函數內部。

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

停用斷點。

不要在出現異常時暫停。

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

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

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

XHR 斷點

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

行為斷點

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

方法置空

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

解除定時器

適用于定時器類觸發的 debug：

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

Hook 鉤子

鉤子英文 Hook，在 windows 系統中，所有的都是消息，按了一下鍵盤，就是一個消息，Hook 的意思就是勾住，在消息過去之前先把消息勾住，不讓其執行，然后自己優先處理。也就是這個技術提供了一個入口，能夠針對不同的消息或者 api 在執行前，先執行我的操作。

“我的操作”就是鉤子函數。在開發者工具中以 chrome 插件的方式，在匹配到關鍵詞處插入斷點。

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

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

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

請求鉤子

請求鉤子用于定位請求中關鍵參數生成位置，以下代碼演示了當請求的 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);

看到這里，給個在看不過分吧

責任編輯：龐桂玉來源： Python開發者

工具瀏覽器