这是完全入门的一个章节，我不会讲任何关于调试的概念，如果已经尝试过断点调试的朋友完全不用看。

这一章仅仅是想让你知道：什么是断点调试。

接下来，跟着我一步一步做，让我们揭开其神秘的面纱。

准备工作

首先，我们准备一个文件，用于断点调试。

  1. 创建一个名为debug-tutorial的文件夹。
  2. 在文件夹中创建一个名为index.js的文件。
  3. 通过 VS Code 打开文件夹

注意：必须是通过 VS Code 打开文件夹 📂，而不是打开文件

image.png

接着，我们选中 index.js文件，然后编码：

  1. // index.js
  2. const str = "hello world"
  4. console.log(str)

好的，准备工作做完了。

创建配置文件

点击下图中指定图标
image.png
此时，VS Code 的界面如下所示：
image.png

接着，我们创建一个配置文件，VS Code 将通过该文件启动调试。

点击，create a launch.json file这个链接，并选择Node.js
image.png
成功创建配置文件之后，VS Code 如下图所示：
image.png
如果你配置文件中的内容与我的不一样，那么我建议你使用我的配置信息。

  1. {
  2.   // Use IntelliSense to learn about possible attributes.
  3.   // Hover to view descriptions of existing attributes.
  4.   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  5.   "version": "0.2.0",
  6.   "configurations": [
  7.     {
  8.       "type": "pwa-node",
  9.       "request": "launch",
  10.       "name": "Launch Program",
  11.       "skipFiles": [
  12.         "<node_internals>/**"
  13.       ],
  14.       "program": "${workspaceFolder}/index.js"
  15.     }
  16.   ]
  17. }

牛刀小试

接着，回到 index.js 页面，并且点击侧边栏中的 image.png 按钮。
image.png

好的，让我们看看效果~
image.png
你会发现，VS Code 好像动了一下，然后又马上结束了。并且在编辑器下方，出现了一个 DEBUG CONSOLE 的面板，并且在面板里面打印出了hello world。

嗯？

程序运行怎么完了？

我不是要调试吗…..

断点调试

其实，上面的情况是因为我们没有打断点，VS Code 在调试的时候发现你并没有说程序要在哪一行停下来，所以，VS Code 就自动的帮你执行完了程序。

接下来，我们打断点：
image.png
当你打完断点之后，VS Code 如下所示：
image.png

接着，我们再通过 image.png 按钮开启调试：
image.png

此时，你会发现 VS Code 多了很多东西。就是我用黄的框框，框起来的部分。 在这一节，我们都不去关注这些东西。

好了，现在我们的程序，就停止了，它停止在我们的断点处。

我们可以将鼠标悬浮在str变量上面，观察：
image.png

接下来，我们点击编辑器顶部的那个小栏的第一个按钮：
image.png

啊哈！我们发现，DEBUG CONSOLE 中打印出了hello world
image.png

干的好！恭喜你，关于断点调试的 Hello World 你就完成啦！

小结

  • 创建调试的配置文件
  • 打断点
  • 运行调试

其实，断点调试都是基于上面三个步骤的。

这一章并不难，也没有概念，希望你能入门。