[TOC]
說明
- 從JS逆向的角度去介紹DevTools常用的功能
- 不會(huì)事無巨細(xì)的介紹所有功能、和舉例子
- 按照功能面板去講解
- 推薦閱讀時(shí)間：10分鐘
- 看完后能花5分鐘對(duì)功能按照使用場(chǎng)景歸納，學(xué)習(xí)效率更高
- 并非專業(yè)人士，請(qǐng)多指教
常見的逆向需求
- 破解接口，還原請(qǐng)求
- 先定位到具體的接口
- 再找到發(fā)送請(qǐng)求的地方
- 查看參數(shù)加密方式
- 還原參數(shù)，模擬請(qǐng)求
- 點(diǎn)擊某元素后都做了什么
- 找到綁定事件的函數(shù)
- 查看其邏輯
Chrome DevTools
使用說明
-
command+shift+p然后輸入面板，可以快速顯示 - 很多面板都是相互配合使用的，但基本思路就是：斷點(diǎn)功能+調(diào)用棧+查看源碼
- 查找邏輯實(shí)現(xiàn)部分，一般分為兩種：
- 從頁(yè)面元素入手，根據(jù)事件找到邏輯
- 從請(qǐng)求入手，找到發(fā)送請(qǐng)求的邏輯，然后看調(diào)用棧
Elements
實(shí)時(shí)顯示頁(yè)面的HTML與CSS
簡(jiǎn)單的靜態(tài)分析：Event Listeners
- 適用：簡(jiǎn)單web框架、原生JS的事件綁定
- 目的：點(diǎn)擊某元素后查看其執(zhí)行的邏輯
- 使用：選中某元素后，點(diǎn)擊
Event Listeners，能查看其綁定的所有Event，常用的click、scroll等 - 說明：如果元素click嵌套多層，可以點(diǎn)擊Remove移除監(jiān)聽，減少干擾項(xiàng)。最后點(diǎn)擊右側(cè)
VM xxx:xxx這種字 定位到相應(yīng)代碼塊
Dom動(dòng)態(tài)分析：DOM Breakpoints
適用：所有場(chǎng)景
目的：監(jiān)聽元素的移出、元素屬性的改變、子元素的改變
-
使用：選中某元素后
- 右鍵或者點(diǎn)擊元素最左側(cè)三個(gè)···
- 選中Break on
- 選擇相應(yīng)的斷點(diǎn)
-
說明：
- Subtree modifications，子節(jié)點(diǎn)改變觸發(fā)
- Attributes modifications，屬性改變觸發(fā)
- Node Removal，元素移除觸發(fā)
Console
控制臺(tái)、運(yùn)行時(shí)環(huán)境，可以打印當(dāng)前運(yùn)行時(shí)的變量。
常用小技巧
保留歷史記錄
功能：防止頁(yè)面刷新、跳轉(zhuǎn)導(dǎo)致的缺失log
使用：勾選Preserve log
4、$_
功能：可以快速獲取Dom、上次結(jié)果的引用
[圖片上傳失敗...(image-ab78a0-1598115481920)]
$0是當(dāng)前選中的Elements 里 html 節(jié)點(diǎn)的引用。
$1是上次Elements選擇的Dom
$4是上上上上次Elements選擇的Dom
$_是對(duì)上次執(zhí)行結(jié)果的引用
store as global variable
功能：將目標(biāo)數(shù)據(jù)快速存儲(chǔ)到變量中，不用手動(dòng)賦值
使用：在數(shù)據(jù)上方右鍵，選擇store as global variable，會(huì)將結(jié)果賦值到 tmpx中，x從1開始累加：temp1、temp2、temp3……
copy
功能：快速將變量的值，完整的復(fù)制到剪切板，轉(zhuǎn)為Json格式的數(shù)據(jù)
說明：個(gè)別網(wǎng)站會(huì)重寫copy函數(shù)，導(dǎo)致此功能無法使用。
console.trace()
功能：打印當(dāng)前調(diào)用堆棧，可以配合斷點(diǎn)使用
說明：功能比較雞肋，后面會(huì)有替代方法
變量監(jiān)控 Create live expression
功能：監(jiān)控目標(biāo)變量
使用：點(diǎn)擊眼睛按鈕，輸入變量名稱，點(diǎn)擊空白處
結(jié)合Console Importer插件
插件地址
功能：快速導(dǎo)入想要的模塊，如Jquery
使用：輸入$i("模塊名稱/模塊@版本/模塊地址")導(dǎo)入相應(yīng)模塊
Network
顯示當(dāng)前頁(yè)面Http、WebSocket請(qǐng)求記錄
常用功能
搜索
使用：command+f 或 點(diǎn)擊放大鏡，搜索接口關(guān)鍵詞（Header、Body的內(nèi)容都能搜到）。可以配合正則使用
注意：這個(gè)搜索只能搜索網(wǎng)絡(luò)部分的數(shù)據(jù)，也就是說通過網(wǎng)絡(luò)請(qǐng)求得到的原始值(有些數(shù)據(jù)是加密傳輸，Dom渲染的是加密后的 值)都可以搜到。
篩選
使用：常用篩選，如圖
說明：
- 左側(cè)Filter里可以過濾domain、method、url、cookie
-
多選過濾條件：按住command，再點(diǎn)擊其他的選項(xiàng)。
image.png
模擬弱網(wǎng)
使用：點(diǎn)擊Disable cache右側(cè)的下拉列表即可
Request Blocking
功能：攔截目標(biāo)請(qǐng)求，如果是一次性接口，則拿到參數(shù)模擬執(zhí)行。
使用：
- 選擇目標(biāo)請(qǐng)求，右鍵，選擇Block Request URL
- 在Request Blocking面板 勾選目標(biāo)接口的復(fù)選框
- 重新觸發(fā)目標(biāo)請(qǐng)求，會(huì)發(fā)現(xiàn)請(qǐng)求失敗(已經(jīng)成功攔截)
說明：也可以在Request Blocking里直接添加請(qǐng)求，效果一樣
快速查看調(diào)用棧
功能：已知目標(biāo)請(qǐng)求，找發(fā)送請(qǐng)求的代碼
使用：點(diǎn)擊Initiator，顯示調(diào)用棧，如圖
Source
Page
當(dāng)前頁(yè)面用到的所有資源，包括Dom、CSS、Js、多媒體文件等，默認(rèn)根據(jù)domain進(jìn)行分類。
注意：這里是渲染前的數(shù)據(jù)，也就是服務(wù)器直接返回的數(shù)據(jù)。
Overrides
功能：替換指定文件，Js、Dom、圖片等文件都可以
一般用于修改網(wǎng)站Js文件，比如刪除debug檢測(cè)、分析參數(shù)算法等
使用：
- Enable local Overrides
- 在page頁(yè)面選擇要替換的文件，右鍵，選擇Save for Overrides
- 在Overrides找到要修改的文件，修改
- 刷新頁(yè)面 或 重新觸發(fā)目標(biāo)
Snippets
功能：很方便的執(zhí)行代碼片段，可以配合$i("模塊")使用，可以保存一些常用的代碼片段。
Watch
功能：監(jiān)控運(yùn)行時(shí)參數(shù)的值，一般用于debug時(shí)候使用
使用：點(diǎn)擊+ 添加監(jiān)控的變量即可
Call Stack
功能：顯示當(dāng)前行的調(diào)用棧，只在debug的時(shí)候有效，通常用于定位Js執(zhí)行邏輯
Scope
功能：顯示運(yùn)行時(shí)所有的變量，可以修改，只在debug的時(shí)候有效
Breakpoints
功能：Js的斷點(diǎn)
所有的Js斷點(diǎn)都會(huì)顯示在這里，可以控制斷點(diǎn)的開關(guān)、刪除等
XHR/fetch Breakpoints
功能：XHR/fetch網(wǎng)絡(luò)請(qǐng)求的斷點(diǎn)，其他類型無效
使用：點(diǎn)擊+添加目標(biāo)請(qǐng)求，可以填URL里的部分參數(shù)，會(huì)自動(dòng)匹配
Event Listener Breakpoints
功能：全局事件的斷點(diǎn)
不推薦使用，因?yàn)闀?huì)監(jiān)聽全局的事件，嵌套比較繁瑣，不好追蹤，耗時(shí)耗力。
但如果所有辦法都試過了還沒有找到想要的，可以嘗試
Search
功能：能夠搜索page里的非二進(jìn)制資源，如Dom、JS、css、link
Performance
本是檢測(cè)性能的工具，但也可以用來查看event
使用：
- 點(diǎn)擊錄制按鈕
- 去觸發(fā)相應(yīng)條件，操作時(shí)間越短干擾越少
- 點(diǎn)擊stop
- 點(diǎn)擊Event Log
-
篩選、查看相應(yīng)的事件
image.png
image.png
快速修改Cookie
Application面板里的Cookies
