0

0

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

看不見的法師

看不見的法師

发布时间:2025-08-08 12:22:01

|

910人浏览过

|

来源于php中文网

原创

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

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

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

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

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

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

launch.json
文件。这个文件告诉VSCode调试器应该如何启动你的Node.js应用。

  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
    作为条件。

    意兔-AI漫画相机
    意兔-AI漫画相机

    照片变漫画手绘,做周边好物

    下载
  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应用,快速定位和解决问题。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

49

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

196

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

50

2026.03.13

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

457

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

549

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

337

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

82

2025.09.10

全局变量怎么定义
全局变量怎么定义

本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

97

2025.09.18

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

49

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
go语言零基础开发内容管理系统
go语言零基础开发内容管理系统

共34课时 | 2.7万人学习

第二十三期_前端开发
第二十三期_前端开发

共98课时 | 8.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号