解锁网页调试神器：巧用debugger断点，玩转前端排查烦恼

2023-03-29 05:16:17

Debugger 断点：前端调试的神器

作为一名前端开发者，你一定遇到过网页调试的难题。此时，debugger 断点就闪亮登场了！它就像一个贴心的助手，帮助你快速定位问题，精准解决 bug。

精准定位问题：
- 添加 debugger 断点，让程序在你指定的位置暂停执行。
- 然后，你可以检查变量的值、调用栈等信息，快速找出问题的根源。
分步调试：
- 使用 debugger 断点，你可以一步一步地执行代码，就像放慢镜头一样。
- 这有助于你理解代码的执行流程，发现隐藏的问题。
探索变量值：
- 通过 debugger 断点，你可以检查变量的值，了解它们在不同执行阶段的变化。
- 这有助于你理解代码的逻辑，发现不合理的赋值或计算错误。
追踪函数调用：
- 使用 debugger 断点，你可以追踪函数的调用栈，了解函数的执行顺序和参数传递。
- 这有助于你理解代码的架构，发现函数之间的依赖关系。

添加 debugger 断点：
- 在想要调试的位置，添加 debugger; 语句。
- 这样，当代码执行到此位置时，就会触发断点，程序将暂停执行。
打开开发者工具：
- 在浏览器中，打开开发者工具。
- 通常，你可以通过按 F12 键或右键单击网页并选择“检查”来打开开发者工具。
启用断点：
- 在开发者工具中，找到“源代码”或“调试”面板。
- 找到你添加的 debugger 断点，并确保它已被启用。
刷新页面或重新加载脚本：
- 刷新页面或重新加载脚本，以便代码重新执行并触发断点。
检查变量值和调用栈：
- 在开发者工具中，你可以检查变量的值、调用栈等信息。
- 这些信息将帮助你理解代码的执行流程，发现问题的根源。

function addNumbers(num1, num2) {
  debugger;  // 添加 debugger 断点
  return num1 + num2;
}

addNumbers(10, 20);

添加了 debugger 断点后，你可以使用开发者工具在代码暂停执行时检查变量 num1 和 num2 的值。

debugger 断点不触发：
- 确保你已正确添加了 debugger 断点。
- 检查你的代码是否被正确加载和执行。
- 有时，你可能需要禁用浏览器缓存才能使断点生效。
无法检查变量值：
- 确保你在断点处暂停了代码执行。
- 变量的值可能会在代码执行过程中发生变化，因此需要在断点处及时检查。
断点失效：
- 如果你先打开网页，再打开检查，那么浏览器会一次性加载全部内容，导致 debugger 失效。
- 正确的做法是：首先在 js 代码中想要调试的位置添加断点，然后再打开检查，最后打开网页。
如何使用 debugger 断点分步调试代码？
- 在断点处暂停代码执行后，你可以使用开发者工具中的“逐步执行”、“逐步进入”和“逐步返回”功能。
- 它们可以让你一步一步地执行代码，了解每个步骤中变量的变化和函数的调用。
debugger 断点有什么替代方案？
- 除了 debugger 断点外，你还可以使用 console.log() 函数来调试代码。
- 虽然 console.log() 函数也可以打印变量值，但它不具备暂停代码执行的功能。