JS 代码调试中的好助手：Visual Studio Code

相比纯看代码来说，我更推荐结合 debugger 来看，它可以让我们看到代码实际的执行路线，每一个变量的变化。可以大段大段代码跳着看，也可以对某段逻辑一步步的执行来看。Javascript 代码主要运行在浏览器环境，因此，我们在对 JS 代码进行调试的时候，需要在浏览器中运行代码，同时使用 VSCode 的 debugger 进行调试。

在 VSCode 中调试 Javascript 代码的步骤

1. 打开 VSCode，并确保已安装了 JavaScript Debugger 插件。
2. 将要调试的 Javascript 代码保存到文件中。
3. 在 VSCode 中打开要调试的 Javascript 文件。
4. 单击调试按钮（或按 F5）以启动调试会话。
5. 在浏览器中打开要调试的网页。
6. 在浏览器中执行要调试的代码。
7. 在 VSCode 中，单击断点按钮（或按 F9）以在代码中设置断点。
8. 在浏览器中继续执行代码。
9. 当代码执行到断点时，VSCode 将暂停执行。
10. 你可以在 VSCode 中检查变量的值、控制台输出，以及调用堆栈。
11. 单击继续按钮（或按 F5）以继续执行代码。

在 VSCode 中使用 debugger 调试 Javascript 代码的技巧

• 使用断点来暂停代码执行。 这可以让你在代码执行到特定位置时检查变量的值、控制台输出，以及调用堆栈。
• 使用控制台来查看输出。 控制台可以让你查看代码的输出，以及错误信息。
• 使用变量监视器来监视变量的值。 这可以让你在代码执行过程中跟踪变量的值的变化。
• 使用调用堆栈来查看函数的调用顺序。 这可以让你了解代码是如何执行的。

常见问题

• 问： 在 VSCode 中调试 Javascript 代码时，我遇到错误。怎么办？
  答： 请检查你是否正确地设置了断点，以及你是否在浏览器中正确地执行了代码。你还可以查看控制台中的错误信息，以了解错误的原因。
• 问： 我该如何在 VSCode 中调试 Node.js 代码？
  答： 在 VSCode 中调试 Node.js 代码与调试 Javascript 代码类似。但是，你首先需要在 VSCode 中安装 Node.js Debugger 插件。
• 问： 我该如何在 VSCode 中调试 React 代码？
  答： 在 VSCode 中调试 React 代码与调试 Javascript 代码类似。但是，你首先需要在 VSCode 中安装 React Developer Tools 插件。