使用 Visual Studio Code 调试 Node.js

大家好，
我是开发团队野生队的成员 Mandai。

您在开发 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 setup”选项。选择此选项。

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

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

 

程序

程序密钥指定要作为您正在开发的 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，但您也可以从 nodemon 或 gulp 等其他选项中进行选择。

 

环境

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

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

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

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

 

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

 

从 VSCode 启动应用程序

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

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

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

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

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

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

 

不仅限于 Node.js 的调试

VSCode 的调试工具似乎不仅可以调试 Node.js，还可以调试 Python。
它为 Django 和 Flask 等主流框架预设了模板，因此您可以像调试 Node.js 应用程序一样进行调试。

 

概括

你觉得VSCode极其易用的调试工具怎么样？
VSCode继承了Visual Studio的诸多优点，从IntelliSense的易用性到调试工具的高质量，都得到了很好的体现。

 
就这样。