VSCode如何调试Node.js应用 VSCode调试Node.js的详细教程

配置vscode的node.js调试环境，首先创建launch.json文件并设置"type": "node"、"request": "launch"、指定"program"入口文件，根据需求配置"env"环境变量、"console"输出位置等；若需附加到运行进程则使用"request": "attach"并指定端口；配合nodemon时设置"runtimeexecutable": "nodemon"并启用"restart": true；通过断点面板管理断点，支持条件断点、函数断点及禁用/删除操作；调试时利用变量面板、监视表达式、调用栈和单步执行等功能观察程序状态，结合控制台求值和变量修改实现高效调试，最终完成对node.js应用的完整调试流程。

VSCode调试Node.js应用，简单来说，就是配置好调试环境，然后打断点，启动调试器，观察变量和执行流程。掌握了这个流程，就能快速定位和解决Node.js应用中的问题。

配置好launch.json文件，设置断点，然后启动调试器。

如何配置VSCode的Node.js调试环境？

配置VSCode的Node.js调试环境，主要就是配置

launch.json

1. 创建

   launch.json

   文件: 在VSCode中，打开你的Node.js项目，点击左侧的调试图标（像一个虫子），然后点击“创建launch.json文件”。选择“Node.js”环境。

2. 理解默认配置: 默认的

   launch.json

   文件可能已经足够简单应用了。通常它会包含一个或多个配置项，每个配置项定义了一种调试方式。例如，你可以有一个配置项用于启动应用，另一个用于附加到正在运行的应用。

3. 常用配置项:

   • "type": "node"

     : 指定调试器类型为Node.js。

   • "request": "launch"

     : 指定调试模式为启动应用。另一种选择是

     "attach"

     ，用于附加到已经运行的Node.js进程。

   • "name": "Launch Program"

     : 配置的名称，显示在调试器启动菜单中。

   • "program": "${workspaceFolder}/app.js"

     : 指定要调试的入口文件。

     ${workspaceFolder}

     是VSCode的内置变量，表示当前项目根目录。你需要根据你的实际情况修改

     app.js

     为你的入口文件。

   • "cwd": "${workspaceFolder}"

     : 指定工作目录。

   • "console": "integratedTerminal"

     : 指定输出到VSCode的集成终端。

   • "args": ["--inspect=9229"]

     : 传递给Node.js进程的参数，

     --inspect

     开启调试模式，

     9229

     是默认的调试端口。

   • "env": { "NODE_ENV": "development" }

     : 设置环境变量。

   • "outputCapture": "std"

     : 捕获标准输出流。

4. 示例配置:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "launch",
         "name": "Launch Program",
         "program": "${workspaceFolder}/app.js",
         "cwd": "${workspaceFolder}",
         "console": "integratedTerminal",
         "env": {
           "NODE_ENV": "development"
         }
       }
     ]
   }

5. 附加到正在运行的进程: 如果你的Node.js应用已经在运行，你可以使用

   "request": "attach"

   来附加到它。 你需要知道Node.js进程的调试端口。 通常，你可以通过

   node --inspect=9229 app.js

   来启动应用，其中

   9229

   是调试端口。

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "attach",
         "name": "Attach to Process",
         "processId": "${command:PickProcess}",
         "restart": true,
         "port": 9229
       }
     ]
   }

   这里，

   "processId": "${command:PickProcess}"

   允许你从运行的Node.js进程列表中选择要附加的进程。

6. 配置nodemon: 如果你使用nodemon来自动重启应用，你需要配置

   launch.json

   来配合nodemon工作。 一个方法是使用

   runtimeExecutable

   配置项来指定nodemon作为运行时可执行文件。

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "launch",
         "name": "Launch with Nodemon",
         "runtimeExecutable": "nodemon",
         "program": "${workspaceFolder}/app.js",
         "restart": true,
         "console": "integratedTerminal",
         "internalConsoleOptions": "never"
       }
     ]
   }

   "restart": true

   告诉调试器在nodemon重启应用时自动重新连接。

   "internalConsoleOptions": "never"

   阻止nodemon的输出出现在调试控制台中，避免干扰。

7. 使用环境变量: 在调试过程中，你可能需要设置环境变量。 你可以在

   launch.json

   的

   "env"

   配置项中设置环境变量。

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "launch",
         "name": "Launch Program",
         "program": "${workspaceFolder}/app.js",
         "cwd": "${workspaceFolder}",
         "console": "integratedTerminal",
         "env": {
           "NODE_ENV": "development",
           "DEBUG": "myapp:*"
         }
       }
     ]
   }

8. 高级配置:

   • "skipFiles"

     : 指定要跳过的文件或目录。 这对于跳过第三方库的代码很有用。

   • "sourceMaps"

     : 如果你的代码经过了转译（例如，使用TypeScript），你需要启用source maps才能正确调试。

配置好

launch.json

如何在VSCode中设置和管理断点？

断点是调试过程中非常重要的工具，它允许你在代码执行到特定位置时暂停程序的运行，以便检查变量的值和程序的执行流程。

1. 设置断点: 在VSCode中设置断点非常简单。只需点击编辑器左侧的行号旁边的空白区域即可。一个红色的圆点会出现在行号旁边，表示断点已经设置。

2. 条件断点: 有时候，你可能只想在特定条件下暂停程序的运行。 你可以设置条件断点，只有当条件满足时，程序才会暂停。 右键点击断点，选择“编辑断点”，然后输入一个表达式作为条件。例如，如果你的循环变量是

   i

   ，你只想在

   i

   等于10时暂停，你可以输入

   i === 10

   作为条件。
   

   Artbreeder

   创建令人惊叹的插画和艺术

   下载

3. 函数断点: 函数断点允许你在函数被调用时暂停程序的运行。 在VSCode的调试视图中，有一个“断点”面板，你可以点击“添加函数断点”按钮，然后输入函数名。

4. 禁用和启用断点: 你可以禁用断点，而无需删除它们。 在“断点”面板中，你可以勾选或取消勾选断点旁边的复选框来启用或禁用断点。

5. 删除断点: 要删除断点，只需再次点击行号旁边的红色圆点即可。你也可以在“断点”面板中右键点击断点，然后选择“删除断点”。

6. 断点行为: 右键点击断点，你可以选择“编辑断点”来修改断点的行为。 除了条件之外，你还可以设置“命中次数”和“日志消息”。 “命中次数”允许你指定断点被命中的次数，只有当断点被命中的次数达到指定值时，程序才会暂停。 “日志消息”允许你在断点被命中时输出一条消息到调试控制台，而无需暂停程序的运行。

7. 管理所有断点: VSCode的“断点”面板允许你查看和管理所有断点。 你可以启用、禁用、删除和编辑断点。 你还可以按文件或按类型对断点进行排序。

8. 临时禁用所有断点: 在调试工具栏上，你可以找到一个“暂停所有断点”的按钮，点击它可以临时禁用所有断点，再次点击则重新启用。

掌握断点的设置和管理技巧，可以让你更高效地调试Node.js应用。

如何使用VSCode调试器观察变量和调用栈？

启动调试器后，你就可以使用VSCode的调试工具来观察变量的值和程序的调用栈。

1. 观察变量: 在程序暂停在断点处时，你可以使用VSCode的“变量”面板来查看当前作用域中的变量的值。 “变量”面板会显示所有局部变量、全局变量和闭包变量。 你可以展开对象和数组来查看它们的属性和元素。

2. 表达式求值: 如果你想查看某个表达式的值，你可以使用VSCode的“调试控制台”。 在调试控制台中，你可以输入任何JavaScript表达式，然后按Enter键来求值。 调试控制台会显示表达式的结果。

3. 监视表达式: 如果你想持续监视某个表达式的值，你可以使用VSCode的“监视”面板。 在“监视”面板中，你可以添加一个或多个表达式，VSCode会在每次程序暂停时自动更新这些表达式的值。

4. 调用栈: VSCode的“调用栈”面板显示了当前程序的调用栈。 调用栈是一个函数调用序列，它显示了程序是如何到达当前位置的。 你可以点击调用栈中的任何一个函数来查看该函数的源代码和变量值。

5. 单步执行: VSCode的调试工具栏包含几个按钮，允许你单步执行程序。

   • 继续 (F5): 继续执行程序，直到遇到下一个断点或程序结束。
   • 单步跳过 (F10): 执行当前行，然后跳到下一行。 如果当前行是一个函数调用，单步跳过会执行完整个函数，然后跳到下一行。
   • 单步进入 (F11): 如果当前行是一个函数调用，单步进入会跳到函数内部的第一行。
   • 单步跳出 (Shift+F11): 执行完当前函数，然后跳回到调用该函数的位置。
   • 重启 (Ctrl+Shift+F5): 重新启动调试器。
   • 停止 (Shift+F5): 停止调试器。

6. 使用

   console.log

   : 虽然VSCode提供了强大的调试工具，但

   console.log

   仍然是一个非常有用的调试工具。 你可以在代码中插入

   console.log

   语句来输出变量的值或程序的执行流程。

7. 修改变量值: 在调试过程中，你可以直接在“变量”面板中修改变量的值，这对于测试不同的代码路径非常有用。

掌握这些调试技巧，可以让你更有效地调试Node.js应用，快速定位和解决问题。