红宝书第三十讲：通俗易懂的JavaScript调试指南

---

红宝书第三十讲：通俗易懂的JavaScript调试指南

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

一、Chrome DevTools核心功能

浏览器内置的 开发者工具，按 F12 或 Ctrl+Shift+I 打开（Windows）^[1]。核心面板：

1. Sources：查看源代码，设置断点
2. Console：查看日志/错误，执行临时代码
3. Elements：实时修改DOM结构和样式

---

二、断点调试三步走

1. 普通断点设置

flowchart LR 打开Sources --> 选择JS文件 --> 点击行号 --> 触发断点暂停

操作示例：

1. 打开 index.html
2. 在Sources面板找到app.js
3. 点击第5行行号，显示蓝色标记
4. 刷新页面，代码执行到此处暂停

2. 代码中直接嵌入断点

function calculateTotal(price, quantity) {
    debugger; // 运行到此自动暂停[^4]
    return price * quantity;
}

3. 条件断点（循环优化）

右键行号 → 选择 Add conditional breakpoint，输入条件如 i === 5
在遍历数组时只中断特定条件的情况^[2]

---

三、调试关键功能

1. 恢复执行

• ▶ 按钮：继续执行到下一个断点
• ⤼ 按钮：逐行执行（进入函数）
• ⤯ 按钮：逐行执行（不进入函数）

2. 实时变量监控

// 查看当前作用域变量
在右侧Watch面板添加变量名：price, quantity

3. DOM元素调试

双击Elements面板选中元素 → 控制台输入 $0 获取该元素实例^[3]

console.log($0.clientWidth); // 输出该元素宽度
$0.style.backgroundColor = "red"; // 实时调试样式

---

四、实战案例：排查价格计算错误

异常代码：

let price = 20;
let quantity = "3"; // 错误：字符串导致计算结果错误

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

调试步骤：

1. 在第5行设置断点
2. 进入调试后，查看右侧Scope面板：
   • price = 20（number）
   • quantity = "3"（string）
3. 发现类型不一致，修正为 parseInt(quantity)

---

五、移动端调试

安卓设备：

1. 用USB连接电脑 → 开启USB调试模式
2. 在Chrome地址栏输入 chrome://inspect
3. 点击手机网页下方的 Inspect（类似桌面端）^[1:1]

---

目录：总目录
上篇文章：红宝书第二十九讲：详解编辑器和IDE：VS Code与WebStorm

---

脚注

---

1. 《JavaScript高级程序设计（第5版）》提供开发者工具快捷键打开方式 ↩︎ ↩︎

2. 《JavaScript高级程序设计（第5版）》说明手动设置断点的方法 ↩︎

3. 《JavaScript高级程序设计（第5版）》描述debugger关键词触发断点 ↩︎