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应用 VSCode调试Node.js的详细教程

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

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

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

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

launch.json

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

创建

launch.json

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

理解默认配置: 默认的

launch.json

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

常用配置项:

"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"

: 捕获标准输出流。

示例配置:

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

附加到正在运行的进程: 如果你的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进程列表中选择要附加的进程。

配置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的输出出现在调试控制台中,避免干扰。

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

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:*"      }    }  ]}

高级配置:

"skipFiles"

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

"sourceMaps"

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

配置好

launch.json

后,就可以在代码中设置断点,然后启动调试器。

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

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

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

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

i

,你只想在

i

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

i === 10

作为条件。

ima.copilot ima.copilot

腾讯大混元模型推出的智能工作台产品,提供知识库管理、AI问答、智能写作等功能

ima.copilot 317 查看详情 ima.copilot

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用

console.log

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

console.log

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

console.log

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

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

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

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

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月27日 15:24:54
下一篇 2025年11月27日 15:31:30

相关推荐

  • 使用 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

发表回复

登录后才能评论
关注微信