调试技术

在哪里使用桌面控制台？

• 打开方式: 浏览器开发者工具的 F12 快捷键;
• 能力: 查看日志、断点调试、检查 DOM 与网络请求;

如何把信息记录到控制台？

console.log("log"); // 常规信息
console.error("log"); // 错误信息
console.info("log"); // 通知信息
console.warn("log"); // 警告信息

debugger 关键字如何使用？

• 行为: 执行到 debugger 时暂停, 交由浏览器的断点机制接管;
• 替代: 若浏览器支持断点, 直接在源码中打点更可控;

function pauseExecution() {
  console.log("Will print before breakpoint");
  debugger;
  console.log("Will not print until breakpoint continues");
}

如何用断言暴露问题？

• 思路: 条件不满足时抛出带描述信息的错误, 让问题在最早的位置暴露;

function assert(condition, message) {
  if (!condition) throw new Error(message);
}

如何在 Sources 面板中定位源码？

• 打开: F12 (Mac 为 Cmd+Opt+I) 后选 Sources 面板;
• 三块区域:
  • File Navigator: 列出页面附带的 HTML、JS、CSS、图片等文件, 也包括浏览器扩展;
  • Code Editor: 显示源代码;
  • JavaScript Debugging: 调试用侧栏, 断点、Watch、Call Stack 都在这里;
• 折叠: 面板上的切换按钮可以收起文件树, 给代码腾出宽度;

断点怎么设置和管理？

• 设置: 直接点行号 (点数字本身, 不是代码); 命中断点时 JavaScript 自动暂停, 此时可查看变量、在控制台执行命令;
• 列表: 右侧面板集中列出全部断点, 可点击跳转、取消勾选临时禁用、右键 Remove 删除;
• 条件断点: 右键行号创建, 只有表达式为真时才触发, 适合只在特定变量值或参数下停下来;
• 快速前进: 右键代码行选 "Continue to here", 省去临时打断点的麻烦;

暂停后能检查哪些信息？

• Watch: 手动添加任意表达式, 显示其当前值, 并随执行自动重算;
• Call Stack: 当前的嵌套调用链; 点击某一层会跳到对应代码, 那一层的变量也可查看;
• Scope: Local 是当前函数的局部变量 (源码上也会高亮显示值), Global 是全局变量, 另有 this;
• 用法: 层层点击调用栈即可还原 "是谁调用了它、传了什么";

单步执行有哪几种方式？

操作	快捷键	行为
Resume	F8	继续执行到下一个断点; 没有断点则失去控制
Step	F9	执行下一条语句, 进入自定义函数的内部
Step over	F10	执行下一条语句, 但不进入函数内部, 调用完立刻暂停
Step into	F11	类似 Step, 但会跟进 setTimeout 等异步回调
Step out	Shift+F11	执行到当前函数末尾再停, 用于误入不关心的调用

• 批量开关: 面板上的按钮可一次启用/禁用全部断点, 本身不移动执行位置;
• 出错暂停: 打开 "出错时自动暂停" 后, 脚本抛错即停在现场, 便于对照变量看上下文;

有哪几种方式让脚本暂停？

1. 断点: 在行号上打点, 最常用;
2. debugger 语句: 写进代码里, 仅在开发者工具打开时生效, 否则浏览器直接忽略;
3. 错误: 开发者工具打开且 "出错自动暂停" 按钮处于开启状态时, 抛错即暂停;

• 日志替代: console.log 足够多时, 可不开调试器, 直接看记录推断执行过程; 在非 Console 面板按 Esc 也能从底部调出控制台;