[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