紅寶書第三十講：通俗易懂的JavaScript調(diào)試指南

資料取自《JavaScript高級程序設(shè)計（第5版）》。
查看總目錄：紅寶書學(xué)習(xí)大綱

一、Chrome DevTools核心功能

瀏覽器內(nèi)置的 開發(fā)者工具，按 F12 或 Ctrl+Shift+I 打開（Windows）^[1]。核心面板：

1. Sources：查看源代碼，設(shè)置斷點
2. Console：查看日志/錯誤，執(zhí)行臨時代碼
3. Elements：實時修改DOM結(jié)構(gòu)和樣式

二、斷點調(diào)試三步走

1. 普通斷點設(shè)置

flowchart LR
    打開Sources --> 選擇JS文件 --> 點擊行號 --> 觸發(fā)斷點暫停

操作示例：

1. 打開 index.html
2. 在Sources面板找到app.js
3. 點擊第5行行號，顯示藍色標記
4. 刷新頁面，代碼執(zhí)行到此處暫停

2. 代碼中直接嵌入斷點

function calculateTotal(price, quantity) {
    debugger; // 運行到此自動暫停[^4]
    return price * quantity;
}

3. 條件斷點（循環(huán)優(yōu)化）

右鍵行號 → 選擇 Add conditional breakpoint，輸入條件如 i === 5
在遍歷數(shù)組時只中斷特定條件的情況^[2]

三、調(diào)試關(guān)鍵功能

1. 恢復(fù)執(zhí)行

• ? 按鈕：繼續(xù)執(zhí)行到下一個斷點
• ? 按鈕：逐行執(zhí)行（進入函數(shù)）
• ? 按鈕：逐行執(zhí)行（不進入函數(shù)）

2. 實時變量監(jiān)控

// 查看當前作用域變量
在右側(cè)Watch面板添加變量名：price, quantity

3. DOM元素調(diào)試

雙擊Elements面板選中元素 → 控制臺輸入 $0 獲取該元素實例^[3]

console.log($0.clientWidth); // 輸出該元素寬度
$0.style.backgroundColor = "red"; // 實時調(diào)試樣式

四、實戰(zhàn)案例：排查價格計算錯誤

異常代碼：

let price = 20;
let quantity = "3"; // 錯誤：字符串導(dǎo)致計算結(jié)果錯誤

function calculateTotal() {
    debugger;
    return price * quantity; // 錯誤返回"60$"
}

調(diào)試步驟：

1. 在第5行設(shè)置斷點
2. 進入調(diào)試后，查看右側(cè)Scope面板：
   • price = 20（number）
   • quantity = "3"（string）
3. 發(fā)現(xiàn)類型不一致，修正為 parseInt(quantity)

五、移動端調(diào)試

安卓設(shè)備：

1. 用USB連接電腦 → 開啟USB調(diào)試模式
2. 在Chrome地址欄輸入 chrome://inspect
3. 點擊手機網(wǎng)頁下方的 Inspect（類似桌面端）^[1]

目錄：總目錄
上篇文章：紅寶書第二十九講：詳解編輯器和IDE：VS Code與WebStorm

腳注

1. 《JavaScript高級程序設(shè)計（第5版）》提供開發(fā)者工具快捷鍵打開方式 ? ?

2. 《JavaScript高級程序設(shè)計（第5版）》說明手動設(shè)置斷點的方法 ?

3. 《JavaScript高級程序設(shè)計（第5版）》描述debugger關(guān)鍵詞觸發(fā)斷點 ?