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