使用 Visual Studio Code 调试 Node.js

大家好，
我是Mandai，Wild团队负责开发工作的成员。

在使用Node.js进行开发时，你使用什么编辑器？
如果你问我推荐哪个编辑器，我会毫不犹豫地推荐Visual Studio Code（VSCode），因为它的调试工具非常强大！

这次，我们将介绍如何使用 VSCode 功能极其强大的调试工具。

 

安装 nodemon 进行调试

说到在源代码修改时自动重启 Node.js 的工具，我记得以前用的是“node-dev”，但现在似乎都用 nodemon 了。

VSCode 官方网站似乎也使用了 nodemon，所以我也想顺应潮流，在这里使用 nodemon。

使用 nodemon 非常简单；只需通过 npm 安装即可。
我考虑过全局安装是否会更好，所以我会使用“-g”选项进行安装。

如果需要，请执行 sudo npm install nodemon -g

 

至此，准备工作全部完成。

 

launch.json 设置

接下来，我们将配置 launch.json 文件，该文件用于设置启动选项和其他设置。
从“调试”菜单中选择“打开配置”应该会自动创建 launch.json 文件。
它已经部分配置完毕，您只需进行一些细微的调整即可。

按下图所示数字顺序点击，即可将项目添加到 launch.json 中。

在 launch.json 屏幕的右下角，您会看到一个名为“添加项目”的按钮，点击它。此时
会出现一个新的设置项，光标也会移动，向下滚动选项，找到名为“Node.js: nodemon 设置”的项，选择它。

您可以在这里更改设置以适应您的个人环境。

以下是一些最常见且经常被纠正的问题。

 

程序

程序密钥指定要作为您正在开发的 Node.js 应用程序入口点的文件。

"${workspaceRoot}" 将被​​替换为 VSCode 中打开的文件夹的路径，因此请根据需要从那里更改路径。

无论下面描述的“cwd”项是什么，都需要包含 ${workspaceRoot} 的目录路径。

 

当前工作内容

如果设置，则会在启动 Node.js 应用程序之前更改工作目录。

这有点令人困惑，但你可以在不设置当前工作目录 (cwd) 的情况下启动应用程序（因为你在程序密钥中指定了绝对路径），但如果你在应用程序中使用相对路径，则会选择从程序执行的当前目录开始的相对路径，从而导致“文件不存在”错误。

 

例子

• 在 VSCode 中打开目录。
  • /path/to/hoge
• app.js 的绝对路径
  • /path/to/hoge/node/app.js

在上述示例中，程序键和当前工作目录键的值如下：

• 程序
  • ${workspaceRoot}/node/app.js
• 当前工作内容
  • ${workspaceRoot}/node

 

参数

启动 Node.js 应用程序时，所需的参数被定义为 args 键下的数组。

由于未以键/值格式指定，因此该值将按原样展开为参数。

"args": [ "-hoge", "--fuga=1", "-a 1", "--port 8080", "--socket", "/path/to/socket" ]

 

当您使用包含如上所示的 args 键的 launch.json 文件启动 Node.js 应用程序时，它将使用以下命令启动：

nodemon --inspect=28106 --debug-brk app.js -hoge --fuga=1 "-a 1" "--port 8080" --socket /path/to/socket

 

需要注意的是，包含空格的值会根据你是要传递字符串“-a 1”还是为 -a 选项指定 1 而以不同的方式写入。

这看起来可能不太对劲，但如果您指定“-a 1”，它将被转换为一个四字符字符串参数，因此，当为 -a 选项指定 1 时，指定 args 键的正确方法是：

"args": [ "-a", "1" ]

 

这些值将分别指定。
因此，args键数组的顺序很重要。

 

运行时参数

为 `runtimeExecutable` 中指定的程序指定参数。`runtimeExecutable`
默认为 Node.js，但您也可以选择其他选项，例如 `nodemon` 或 `gulp`。

 

环境

指定运行时要指定的环境变量。

在 Linux 系统中，它是传递给 env 命令的值；在 Windows 系统中，它是传递给 $env 的值。

可能很难区分 env、runtimeArgs 和 args 这三个参数的具体含义，但在 Linux 系统上运行时，它看起来会像这样：

env [env] node [runtimeArgs] app.js [args]

 

它就像一个数学公式，所以可能更容易记住。

 

从 VSCode 启动应用程序

配置完 launch.json 后，尝试从 VSCode 启动它。

启动过程很简单；只需按照下图中的步骤操作即可。

启动成功后，尝试通过浏览器访问该应用程序。
您应该可以像以前一样访问它。

您可以通过单击编辑器中行号左侧来设置断点，因此如果您在可疑部分停止，您还可以检查该变量在该时刻的值。

当对已暂停的程序进行调试时，会出现如下图所示的进度条，您可以点击它来逐步执行程序。

接下来，让我们充分利用左侧的监视表达式（显示已定义的变量和对象）、调用堆栈（显示断点处理之前经过的函数）以及已设置断点的列表，以进一步提高我们的调试效率！

 

不仅限于 Node.js 的调试

VS Code 的调试工具不仅可以调试 Node.js，还可以调试 Python。它
为 Django 和 Flask 等主流框架预设了模板，让您可以像调试 Node.js 应用程序一样轻松地进行调试。

 

概括

你觉得 VS Code 极其人性化的调试工具怎么样？
VS Code 似乎真的继承了 Visual Studio 的诸多优点，从易用的 IntelliSense 到高质量的调试工具，都令人印象深刻。

 
就这样。