为什么我们需要Debugger？
发现错误： 调试器帮助我们在代码运行时捕捉到错误。
理解流程： 它们允许我们逐步查看代码的运行方式，深入了解代码的执行过程。
检查变量： Debugger使我们能够在代码的不同点检查变量的值，有助于理解和调试问题。
如何使用Debugger？
想象一下你经营一家面包店，想要追踪为什么你的饼干总是消失。
function bakeCookies() {
let cookies = 10;
console.log("贼偷饼干前：" + cookies);
// 神秘的饼干贼！
cookies -= 3;
console.log("贼偷饼干后：" + cookies);
}
bakeCookies();
为了抓住贼，你可以使用Debugger。
步骤：
-
添加 debugger 关键字： 在你怀疑有问题的地方加上
debugger;。 -
使用开发者工具： 打开浏览器的开发者工具（通常是按 F12）。
- 切换到 "Sources"（源代码）选项卡。
- 代码会在
debugger;行暂停。 - 使用 "Step over"（F10）逐行执行。
- 使用 "Step into"（F11）进入函数调用。
- 检查 "Scope"（作用域）部分查看变量的值。
想象一个应该数到5的机器人却不合作的情况。
function robotCount() {
for (let i = 1; i <= 5; i++) {
debugger; // 暂停并检查 i 的值
console.log("机器人说：" + i);
}
}
robotCount();
这个Debugger会在每次循环迭代时暂停，允许你监视 i 并解决任何问题。
使用Debugger的技巧
- 断点： 在 "Sources"（源代码）选项卡中点击行号设置断点，以在特定点暂停代码执行。
- 监视表达式： 将变量添加到 "Watch"（监视）面板中，监视它们在调试过程中的值。
- 调用堆栈： 查看 "Call Stack"（调用堆栈）面板，了解到达当前点的函数调用序列。
为什么这很有趣？
使用Debugger就像在自己的代码中扮演福尔摩斯（Sherlock Holmes）。你可以进行调查、解决难题，并在解决问题后看到代码完美运行的满足感非常巨大。
