VSCode如何调试Node.js应用程序 VSCode调试Node.js的完整配置流程

配置launch.json文件是vscode调试node.js应用的核心,需在项目根目录的.vscode文件夹中创建并设置调试参数;2. 基础配置包括指定type为node、request为launch、正确设置program入口文件路径,并可配置env环境变量和console输出方式;3. 调试带参数的程序时,在launch.json中添加args数组传入命令行参数;4. 调试使用nodemon的程序需将request设为attach,启动nodemon –inspect后通过pickprocess选择进程附加;5. 调试typescript程序需在launch.json中设置prelaunchtask执行tsc编译任务,启用sourcemaps并指定outfiles路径,同时配置tasks.json和tsconfig.json支持编译和sourcemap生成;6. 遇到”cannot connect to runtime process”错误时,应检查端口冲突、防火墙设置、node.js版本、是否启用–inspect及launch.json配置正确性;7. 调试时可通过variables面板查看变量、watch面板监控表达式、调试控制台执行和修改变量值,以及悬停提示快速查看变量内容,从而高效定位和解决问题。

VSCode如何调试Node.js应用程序 VSCode调试Node.js的完整配置流程

VSCode调试Node.js应用的核心在于配置launch.json文件,指定调试环境和入口文件。配置正确,就能在VSCode里打断点,单步调试,爽歪歪。

VSCode如何调试Node.js应用程序 VSCode调试Node.js的完整配置流程

配置VSCode调试Node.js的完整流程:

创建.vscode/launch.json文件: 在你的Node.js项目根目录下,如果还没有.vscode文件夹,就新建一个。然后在.vscode文件夹里创建一个launch.json文件。

VSCode如何调试Node.js应用程序 VSCode调试Node.js的完整配置流程

配置launch.json 打开launch.json文件,复制粘贴下面的配置。当然,根据你的项目情况,需要修改一些地方。

{  "version": "0.2.0",  "configurations": [    {      "type": "node",      "request": "launch",      "name": "Launch Program",      "program": "${workspaceFolder}/app.js",      "console": "integratedTerminal",      "internalConsoleOptions": "neverOpen",      "env": {        "NODE_ENV": "development"      }    }  ]}
*   `"type": "node"`:  指定调试类型为Node.js。*   `"request": "launch"`:  指定启动调试。*   `"name": "Launch Program"`:  调试配置的名称,随便起,方便你自己识别就行。*   `"program": "${workspaceFolder}/app.js"`:  指定要调试的入口文件。  `${workspaceFolder}`  表示当前项目根目录。  `app.js`  改成你的入口文件名字。  如果你的入口文件在其他目录,比如`src/index.js`,那就改成`"${workspaceFolder}/src/index.js"`。*   `"console": "integratedTerminal"`:  指定控制台输出到VSCode的集成终端。*   `"internalConsoleOptions": "neverOpen"`:  不要打开内部控制台。*   `"env": { "NODE_ENV": "development" }`:  设置环境变量。  `NODE_ENV`  设置为`development`,方便你区分开发环境和生产环境。

设置断点: 在你想要调试的代码行号旁边,单击一下,就可以设置断点。 VSCode会在行号旁边显示一个红点。

VSCode如何调试Node.js应用程序 VSCode调试Node.js的完整配置流程

启动调试: 按下F5键,或者点击VSCode左侧的调试图标(像一个播放按钮),就可以启动调试。

调试: 程序会在断点处停下来。 你可以使用VSCode提供的调试工具栏,进行单步调试、跳过、继续、重启等操作。 你也可以在VSCode的调试控制台中查看变量的值。

如何调试带参数的Node.js程序?

如果你的Node.js程序需要接收命令行参数,你需要在launch.json文件中添加args配置。 例如:

{  "version": "0.2.0",  "configurations": [    {      "type": "node",      "request": "launch",      "name": "Launch Program with Arguments",      "program": "${workspaceFolder}/app.js",      "args": ["--port", "3000", "--debug"],      "console": "integratedTerminal",      "internalConsoleOptions": "neverOpen",      "env": {        "NODE_ENV": "development"      }    }  ]}

"args": ["--port", "3000", "--debug"]: 指定传递给程序的命令行参数。 --port--debug 是参数名,3000--port 参数的值。 根据你的程序需要,修改参数列表。

如何调试使用nodemon的Node.js程序?

如果你使用nodemon来自动重启Node.js程序,你需要修改launch.json文件,使用"request": "attach"配置。 首先全局安装nodemon:

npm install -g nodemon

然后,修改launch.json

{  "version": "0.2.0",  "configurations": [    {      "type": "node",      "request": "attach",      "name": "Attach to Process",      "processId": "${command:PickProcess}",      "restart": true,      "port": 9229    }  ]}
*   `"request": "attach"`:  指定附加到正在运行的进程。*   `"processId": "${command:PickProcess}"`:  指定要附加的进程ID。  VSCode会在启动调试时,弹出一个列表,让你选择要附加的Node.js进程。*   `"restart": true`:  如果nodemon重启了程序,VSCode会自动重新附加。* `"port": 9229`: nodemon 默认的调试端口。

启动调试前,先用nodemon启动你的Node.js程序:

nodemon --inspect app.js

然后,在VSCode中按下F5,选择要附加的Node.js进程。

如何调试TypeScript编写的Node.js程序?

调试TypeScript编写的Node.js程序,需要先将TypeScript代码编译成JavaScript代码。 你可以使用tsc命令或者构建工具(比如webpack、rollup)来编译TypeScript代码。

然后,在launch.json文件中,指定编译后的JavaScript文件作为入口文件。 例如:

白瓜面试 白瓜面试

白瓜面试 – AI面试助手,辅助笔试面试神器

白瓜面试 40 查看详情 白瓜面试

{  "version": "0.2.0",  "configurations": [    {      "type": "node",      "request": "launch",      "name": "Launch Program (TypeScript)",      "program": "${workspaceFolder}/dist/app.js",      "console": "integratedTerminal",      "internalConsoleOptions": "neverOpen",      "preLaunchTask": "tsc: build", // 编译 TypeScript      "sourceMaps": true,      "outFiles": [          "${workspaceFolder}/dist/**/*.js"      ]    }  ],  "compounds": []}

"program": "${workspaceFolder}/dist/app.js": 指定编译后的JavaScript文件作为入口文件。 dist 是编译输出目录。"preLaunchTask": "tsc: build": 在启动调试之前,先执行一个任务。 tsc: build 是任务的名称。 你需要在.vscode/tasks.json文件中定义这个任务。"sourceMaps": true: 启用 sourcemap,方便调试 TypeScript 源代码。"outFiles": ["${workspaceFolder}/dist/**/*.js"]: 指定输出文件位置,用于 sourcemap 查找。

.vscode文件夹下创建tasks.json文件,并添加以下内容:

{    "version": "2.0.0",    "tasks": [        {            "type": "typescript",            "tsconfig": "tsconfig.json",            "problemMatcher": [                "$tsc"            ],            "group": "build",            "label": "tsc: build"        }    ]}

确保你的tsconfig.json文件配置正确,指定了输出目录和sourcemap选项。 例如:

{  "compilerOptions": {    "target": "es6",    "module": "commonjs",    "outDir": "./dist",    "sourceMap": true,    "strict": true,    "esModuleInterop": true  },  "include": ["src/**/*"]}

"outDir": "./dist": 指定输出目录为./dist"sourceMap": true: 生成sourcemap文件。

调试时遇到”Cannot connect to runtime process”错误怎么办?

这个错误通常是由于以下原因导致的:

端口冲突: 调试端口被其他程序占用。 你可以尝试修改launch.json文件中的"port"配置,使用一个未被占用的端口。

防火墙阻止连接: 防火墙阻止了VSCode和Node.js进程之间的连接。 你需要配置防火墙,允许VSCode和Node.js进程之间的通信。

Node.js版本过低: 某些版本的Node.js可能不支持调试功能。 你可以尝试升级Node.js到最新版本。

--inspect参数未启用: 使用nodemon调试时,如果启动命令中没有添加--inspect参数,也会导致无法连接。

错误的launch.json配置: 仔细检查launch.json文件,确保配置正确。 特别是"program""args""processId"等配置。

如何使用VSCode调试器查看和修改变量值?

在调试过程中,VSCode提供了强大的变量查看和修改功能。

Variables面板: 在VSCode的调试侧边栏,有一个”Variables”面板,显示当前作用域内的所有变量及其值。你可以展开对象和数组,查看它们的属性和元素。

Watch面板: 在VSCode的调试侧边栏,还有一个”Watch”面板,你可以添加表达式,VSCode会实时计算表达式的值。 这对于查看复杂的表达式或者特定属性的值非常有用。

调试控制台: 在VSCode的调试控制台中,你可以输入表达式,VSCode会计算表达式的值并显示出来。 你也可以使用调试控制台来修改变量的值。 例如,你可以输入a = 10来将变量a的值修改为10。

悬停提示: 在调试过程中,你可以将鼠标悬停在变量上,VSCode会显示变量的值。

掌握这些技巧,你就能像使用魔法一样,轻松调试Node.js应用程序,快速定位和解决问题。

以上就是VSCode如何调试Node.js应用程序 VSCode调试Node.js的完整配置流程的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/472644.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月8日 08:10:05
下一篇 2025年11月8日 08:10:55

相关推荐

  • 使用 Mask 导入本地图片时,如何解决跨域问题?

    跨域疑难:如何解决 mask 引入本地图片产生的跨域问题? 在使用 mask 导入本地图片时,你可能会遇到令人沮丧的跨域错误。为什么会出现跨域问题呢?让我们深入了解一下: mask 框架假设你以 http(s) 协议加载你的 html 文件,而当使用 file:// 协议打开本地文件时,就会产生跨域…

    2025年12月24日
    200
  • TypeScript 中如何约束对象为 CSS 属性?

    typescript 中如何约束对象为 css 属性 想要约束一个对象为 css 属性,以便在调用函数时得到自动补全提示,可以采用以下方法: 使用 react 的 cssproperties 类型 对于 react 项目,可以使用 react 提供的 cssproperties 类型: 立即学习“前…

    2025年12月24日
    300
  • 如何在 TypeScript 中约束对象为 CSS 属性?

    如何在 typescript 中约束对象为 css 属性? 在 typescript 中,为特定目的而约束对象类型是很重要的。在本文中,我们将探究如何将对象约束为包含 css 属性。 考虑以下函数: function setattrstoelement(el: htmlelement, attr: …

    2025年12月24日
    000
  • 如何使用 TypeScript 约束对象以匹配 CSS 属性?

    如何约束 typescript 对象以匹配 css 属性? setattrstoelement 函数接收两个参数,其中第二个参数应为 css 属性。对于 react 项目,可以使用 cssproperties 类型: import { cssproperties } from “react”;fun…

    2025年12月24日
    000
  • 为什么使用 :global 修改 Antd 样式无效?

    :global 修改 antd 样式为何无效 本文旨在帮助您解决在组件内使用:global修改 antd 全局样式未生效的问题。 问题描述 您在组件内使用:global修改 antd 按钮样式,但没有生效。完整代码可参考 https://codesandbox.io/s/fk7jnl 。 解决方案 …

    2025年12月24日
    000
  • 为什么在 React 组件中无法获得 Tailwind CSS 语法提示?

    为什么在 React 组件中无法获得 Tailwind CSS 语法提示? 你在 VSCode 中编写 HTML 文件时,可以正常获取 Tailwind CSS 语法提示。但当你尝试在 React 组件中编写 Tailwind CSS 时,这些提示却消失不见了。这是什么原因造成的? 解决方案 要解决…

    2025年12月24日
    000
  • 如何在 VSCode 中为 React 组件启用 Tailwind CSS 提示?

    在 vscode 中为 react 组件启用 tailwind css 提示 如果你在使用 vscode 编写 react 组件时,发现 tailwind css 提示无法正常显示,这里有一个解决方法: 安装 tailwind css intellisense 插件 这是实现代码提示的关键,确保你已…

    2025年12月24日
    200
  • 您不需要 CSS 预处理器

    原生 css 在最近几个月/几年里取得了长足的进步。在这篇文章中,我将回顾人们使用 sass、less 和 stylus 等 css 预处理器的主要原因,并向您展示如何使用原生 css 完成这些相同的事情。 分隔文件 分离文件是人们使用预处理器的主要原因之一。尽管您已经能够将另一个文件导入到 css…

    2025年12月24日
    000
  • Vue3 中如何将页面上的 PX 单位转换为 REM?

    vue3 下如何实现某个页面 px 自适应到 rem? 在 vue3 中,您可以在某个页面中使用 px 转 rem 的自适应功能,以免影响其他项目 ui 框架。以下是实现方法: 使用 jquery 获取页面宽度,并将其作为基准值。例如,使用 375 作为基准,您可以在页面 mounted 生命周期函…

    2025年12月24日
    000
  • 如何实现 Vue 3 项目中特定页面自适应,避免影响全局 UI 框架?

    自适应页面 px 到 rem 插件探索 在 vue 3 项目中,开发者有时需要让某个特定页面具有自适应大小,即根据不同分辨率自动调整 px 到 rem 的转换。然而,传统的 px-to-rem 插件可能会影响整个项目的 ui 框架。 为了解决这个问题,这里提供了一种利用 javascript 和 v…

    2025年12月24日
    000
  • Vue 3 页面如何实现 px to rem 自适应?

    如何在 vue 3 页面中实现 px to rem 自适应? 在 vue 项目中,有时需要让特定的页面进行 px to rem 自适应,以实现自动缩放。以下是一个可用的解决方案: 使用 javascript 获取页面宽度,并以 375px 作为基准值。例如: let appwidth = $(‘#a…

    2025年12月24日
    400
  • React 嵌套组件中,CSS 样式会互相影响吗?

    react 嵌套组件 css 穿透影响 在 react 中,嵌套组件的 css 样式是否会相互影响,取决于采用的 css 解决方案。 传统 css 如果使用传统的 css,在嵌套组件中定义的样式可能会穿透影响到父组件。例如,在给出的代码中: 立即学习“前端免费学习笔记(深入)”; component…

    2025年12月24日
    000
  • React 嵌套组件中父组件 CSS 修饰会影响子组件样式吗?

    对嵌套组件的 CSS 修饰是否影响子组件样式 提问: 在 React 中,如果对嵌套组件 ComponentA 配置 CSS 修饰,是否会影响到其子组件 ComponentB 的样式?ComponentA 是由 HTML 元素(如 div)组成的。 回答: 立即学习“前端免费学习笔记(深入)”; 在…

    2025年12月24日
    000
  • CSS 砌体 Catness

    css 就像技术中的其他东西一样 – 它总是在变化和发展。该领域正在进行的开发是 css 网格布局模块级别 3,也称为 css masonry 布局。 theo 制作了一段视频,介绍了它的开发方式以及苹果和谷歌就如何实施它进行的辩论。 所有这些让我很高兴尝试 css 砌体! webkit…

    好文分享 2025年12月24日
    000
  • 如何解决VSCode中折叠部分的代码复制问题?

    Vscode中折叠代码的复制方法 当Vscode中的代码过多时,可以将其折叠起来以方便查看和编辑。不过,有时用户可能会发现折叠后复制代码时只复制了显示的部分,而折叠部分没有被复制。以下是如何解决此问题的方法: 使用快捷键Ctrl+C直接复制 当代码折叠时,直接使用Ctrl+C快捷键复制即可复制所有代…

    2025年12月24日
    000
  • 如何复制折叠的代码?

    Visual Studio Code 中如何复制折叠的代码? Visual Studio Code (vscode) 中,当遇到过长的代码时,为了提高可读性和简洁性,开发人员会经常使用折叠功能将代码折叠起来。然而,在折叠代码后,直接按住 Ctrl + C 复制代码时,只会复制展开的部分,而折叠的部分…

    2025年12月24日
    000
  • 如何在 VSCode 复制折叠的代码?

    如何复制折叠的 VSCode 代码 使用 VSCode 时,代码过长可能会造成不便。在折叠代码后,发现无法正常复制折叠的部分,令人感到烦恼。本文将介绍一种解决方案,帮助你轻松复制折叠的 VSCode 代码。 问题:如何复制折叠起来的 VSCode 代码? 当你折叠代码后,直接选中复制只会复制未折叠的…

    2025年12月24日
    000
  • CSS 太棒了!

    我正在学习什么 css 赋予了页面活力。多年来,css 变得越来越强大,并且已经开始用于制作以前需要 javascript 的动画。本周我一直在研究它的一些更高级的属性。 媒体查询 媒体查询几乎已经成为新时代设备的必需品。随着智能手机的出现,通过手机消费媒体的人比任何其他设备都多。因此,网站必须在移…

    2025年12月24日
    000
  • 在 React 项目中实现 CSS 模块

    react 中的 css 模块是一种通过自动生成唯一的类名来确定 css 范围的方法。这可以防止大型应用程序中的类名冲突并允许模块化样式。以下是在 react 项目中使用 css 模块的方法: 1. 设置 默认情况下,react 支持 css 模块。你只需要用扩展名 .module.css 命名你的…

    2025年12月24日
    000
  • 试验 Tailwind CSS:快速指南

    tailwind css 是一个实用性优先的 css 框架,因其灵活性和易用性而在 web 开发人员中广受欢迎。 tailwind css 在 npm 上的每周下载量超过 950 万次(2024 年 8 月 5 日),显然它是 web 开发社区的最爱。在这篇博文中,我们将探讨如何在不设置本地开发环境…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信