在前端開發的世界里，Chrome開發者工具就是我們的瑞士軍刀，它集成了各種強大的功能，幫助我們快速定位和解決代碼中的問題。今天，就讓我們一起來看看如何使用Chrome開發者工具中的“調試三劍客”：斷點調試、調用棧跟蹤和控制臺輸出變量。
一、斷點調試：代碼的“檢查站”
斷點調試就像是在高速公路上設置的檢查站，當代碼執行到某個特定位置時，它會停下來，讓我們可以查看當前的變量值、調用棧等信息，看看代碼是否按預期運行。
1. 設置斷點
在Chrome開發者工具中，打開“Sources”面板，找到你要調試的JavaScript文件。點擊代碼行號的左側，設置一個斷點。當代碼執行到這一行時，會自動暫停。
2. 暫停與恢復
代碼暫停后，你可以查看當前的變量值、調用棧等信息。點擊“Resume script execution”按鈕（或按F8），代碼將繼續執行。
3. 單步調試
-
Step Over：執行當前行，不進入函數內部。
-
Step Into：進入當前行調用的函數內部。
-
Step Out：執行完當前函數并退出。
4. 條件斷點
僅在您提供的條件為 true 時觸發的條件斷點。例如，只有在某個變量達到特定值時才暫停代碼執行。
let count = 0;
while (count < 10) {count++;// 在這里設置條件斷點，當 count === 5 時暫停
}5. 異常斷點
在捕獲的異常或未捕獲的異常上設置斷點。這可以幫助你快速定位到代碼中拋出異常的地方。
案例：異常斷點
function divide(a, b) {if (b === 0) {throw new Error("除數不能為零");}return a / b;
}function calculate() {let result = divide(10, 0); // 這里會拋出異常return result;
}calculate();調試步驟：
-
打開Chrome開發者工具，切換到“Sources”面板。
-
在“Debugger”部分，找到“Breakpoints”選項。
-
勾選“Pause on exceptions”選項。
-
執行代碼，當代碼拋出異常時，開發者工具會自動暫停在拋出異常的行。
6. XHR斷點
當請求的網址與您提供的子字符串匹配時觸發的XHR斷點。這在調試網絡請求時非常有用。
案例：XHR斷點
function fetchData() {let xhr = new XMLHttpRequest();xhr.open("GET", "https://api.example.com/data");xhr.onload = function() {console.log("Data loaded:", xhr.responseText);};xhr.send();
}fetchData();調試步驟：
-
打開Chrome開發者工具，切換到“Sources”面板。
-
在“Debugger”部分，找到“XHR/Breakpoints”選項。
-
輸入要匹配的URL子字符串，例如“example.com”。
-
執行代碼，當發送匹配的XHR請求時，開發者工具會自動暫停。
二、調用棧跟蹤：代碼的“偵探”
調用棧跟蹤就像是偵探破案時的線索追蹤，它記錄了函數調用的順序，幫助我們找到代碼中的“罪魁禍首”。
案例：調用棧跟蹤
function add(a, b) {return a + b;
}function multiply(a, b) {return a * b;
}function calculate() {let sum = add(5, 10);let product = multiply(sum, 2);return product;
}calculate();調試步驟：
-
打開Chrome開發者工具，切換到“Sources”面板。
-
在
multiply函數內部設置一個斷點。 -
執行代碼，當代碼暫停時，打開“Call Stack”面板。
-
查看調用棧，可以看到函數調用的順序：
calculate?->multiply。 -
點擊調用棧中的某一行，可以跳轉到對應的函數定義處。
三、控制臺輸出變量：實時查看變量值
控制臺輸出變量就像是給代碼加了一個“監視器”，可以實時查看變量的值，幫助我們了解代碼的運行狀態。
1. 輸出變量
在代碼中使用console.log()、console.info()、console.warn()和console.error()等方法輸出變量。
let name = "John";
let age = 30;
console.log("Name:", name);
console.log("Age:", age);2. 查看輸出
打開Chrome開發者工具的“Console”面板，查看輸出的變量值。
3. 條件輸出
可以使用console.log()的條件輸出功能，只在滿足特定條件時輸出變量。
let age = 30;
if (age > 25) {console.log("Age is greater than 25:", age);
}四、實戰示例
下面是一個綜合示例，展示如何使用Chrome開發者工具進行調試：
function calculateSum(a, b) {let sum = a + b;console.log("Sum:", sum); // 輸出變量return sum;
}function main() {let a = 5;let b = 10;let result = calculateSum(a, b);return result;
}// 設置斷點
let finalResult = main();調試步驟：
-
打開Chrome開發者工具，切換到“Sources”面板。
-
找到包含上述代碼的文件，點擊
main函數內部的某一行設置斷點。 -
執行代碼，當代碼暫停時，查看調用棧和變量值。
-
使用單步調試功能，逐步執行代碼，觀察變量的變化。
-
查看“Console”面板中的輸出，確認變量值是否符合預期。
五、總結
Chrome開發者工具中的斷點調試、調用棧跟蹤和控制臺輸出變量是web逆向的得力助手。通過這工具，我們可以快速逆向得到的算法和邏輯是否正確。
)
)
