详解vscode中如何更简单、有效地调试Node.js程序!!

本篇文章给大家介绍一下使用vscode调试node.js的超简单方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

详解vscode中如何更简单、有效地调试Node.js程序!!

推荐学习:《vscode教程》、《nodejs 教程》

让我们面对现实吧…调试 Node.js 一直是我们心中的痛。

1.png

触达调试 Node.js 的痛点

如果你曾经有幸为 Node.js 项目编写代码,那么当我说调试它以找到出错的地方并不是最简单的事情时,你就知道我在谈论什么。

不像浏览器中的 JavaScript,也不像有类似 IntelliJ 这样强大的 IDE 的 Java,你无法到处设置断点,刷新页面或者重启编译器,也无法慢慢审阅代码、检查对象、评估函数、查找变异或者遗漏的变量等。你无法那样去做,这简直太糟糕了。

但 Node.js 也是可以被调试的,只是需要多费些体力。让我们认真讨论这些可选方法,我会展示给你在我开发经历中遇到的最简单调试方法。

调试 Node.js 的一些可选方法

有一些方式能调试有问题的 Node.js 程序。我把这些方法(包含详细链接)都列在了下面。如果你感兴趣,可以去了解下。

Console.log() — 如果你曾经编写过 JavaScript 代码,那么这个可靠的备用程序真的不需要进一步解释。它被内置在 Node.js 并在终端中打印,就像内置到 JavaScript,并在浏览器控制台中打印一样。

在 Java 语言下,它是 System.out.println()。在 Python 语言下,它是 print()。你明白我的意思了吧。这是最容易实现的方法,也是用额外的行信息来“弄脏”干净代码的最快方法 —— 但它(有时)也可以帮助你发现和修复错误。

Node.js 文档 —-inspect — Node.js 文档撰写者本身明白调试不大简单,所以他们做了一些方便的参考帮助人们开始调试。

这很有用,但是老实说,除非你已经编写了一段时间的程序,否则它并不是最容易破译的。它们很快就进入了 UUIDs、WebSockets 和安全隐患的陷阱,我开始感到无所适从。我心里想:一定有一种不那么复杂的方法来做这件事。

Chrome DevTools — Paul Irish 在 2016 年撰写了一篇有关使用 Chrome 开发者工具调试 Node.js 的博文(并在 2018 年更新)。它看起来相当简单,对于调试来说是一个很大的进步。

半个小时之后,我仍然没有成功地将 DevTools 窗口连接到我的简单 Node 程序上,我不再那么肯定了。也许我只是不能按照说明去做,但是 Chrome DevTools 似乎让调试变得比它应该的更复杂。

JetBrains — JetBrains 是我最喜欢的软件开发公司之一,也是 IntelliJ 和 WebStorm 的开发商之一。他们的工具有一个奇妙的插件生态系统,直到最近,他们还是我的首选 IDE。

有了这样一个专业用户基础,就出现了许多有用的文章,它们调试 Node,但与 Node 文档和 Chrome DevTools 选项类似,这并不容易。你必须创建调试配置,附加正在运行的进程,并在 WebStorm 准备就绪之前在首选项中进行大量配置。

Visual Studio Code — 这是我新的 Node 调试黄金标准。我从来没有想过我会这么说,但是我完全投入到 VS Code 中,并且团队所做的每一个新特性的发布,都使我更加喜爱这个 IDE。

VS Code 做了其他所有选项在调试 Node.js 都没能做到的事情,这让它变得傻瓜式简单。如果你想让你的调试变得更高级,这当然也是可以的,但是他们把它分解得足够简单,任何人都可以快速上手并运行,不论你对 IDE、Node 和编程的熟练度如何。这太棒了。

配置 VS Code 来调试 Node.js

2.png

好吧,让我们来配置 VS Code 来调试 Node,开始配置它吧。

打开 Preferences > Settings,在搜索框中输入 node debug。在 Extensions 选项卡下应该会有一个叫 Node debug 的扩展。在这里点击第一个方框: Debug > Node: Auto Attach,然后设置下拉框的选项为 on。你现在几乎已经配置完成了。是的,这相当的简单。

3.png

现在进入项目文件,然后通过点击文件的左侧边栏,在你想要看到代码暂停的地方设置一些断点。在终端内输入 node --inspect 。现在看,神奇的事情发生了…

4.png

VS Code 正在进行的代码调试

如果你需要一个 Node.js 项目来测试它,可以下载我的 repo。它是用来测试使用 Node 传输大量数据的不同形式的,但是它在这个演示中非常好用。

当你敲击 Enter 键时,你的 VS Code 终端底部会变成橙色,表示你处于调试模式,你的控制台会打印一些类似于 Debugger Attached 的信息。

5.png

当你看到这一幕发生时,恭喜你,你已经让 Node.js 运行在调试模式下啦!

至此,你可以在屏幕的左下角看到你设置的断点(而且你可以通过复选框切换这些断点的启用状态),而且,你可以像在浏览器中那样去调试。在 IDE 的顶部中心有小小的继续、步出、步入、重新运行等按钮,从而逐步完成代码。VS Code 甚至用黄色突出显示了你已经停止的断点和行,使其更容易被跟踪。

6.png

当你从一个断点切换到另一个断点时,你可以看到程序在 VS Code 底部的调试控制台中打印出一堆 console.log,黄色的高亮显示也会随之一起移动。

7.png

正如你所看到的,随着程序的运行,调试控制台输出的内容越多,断点就越多,在此过程中,我可以使用 VS Code 左上角的工具在本地范围内探索对象和函数,就像我可以在浏览器中探索范围和对象一样。不错!

这很简单,对吧?

总结

Node.js 的调试不需要像过去那样麻烦,也不需要在代码库中包含 500 多个 console.log 来找出 bug 的位置。

Visual Studio Code 的 Debug > Node: Auto Attach 设置使之成为过去,我对此非常感激。

再过几周,我将会写一些关于端到端测试的文章,使用 Puppeteer 和 headless Chrome,或者使用 Nodemailer 在 MERN 应用程序中重置密码,所以请关注我,以免错过。

感谢阅读,希望这篇文章能让你了解如何在 VS Code 的帮助下更容易、更有效地调试 Node.js 程序。非常感谢你给我的掌声和对我文章的分享!

原文地址:https://itnext.io/the-absolute-easiest-way-to-debug-node-js-with-vscode-2e02ef5b1bad

原文作者:Paige Niedringhaus

译文永久链接:https://github.com/xitu/gold-miner/blob/master/TODO1/the-absolute-easiest-way-to-debug-node-js-with-vscode.md

译者:iceytea

更多编程相关知识,请访问:编程视频!!

以上就是详解vscode中如何更简单、有效地调试Node.js程序!!的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月10日 19:46:51
下一篇 2025年11月10日 19:57:38

相关推荐

  • VSCode选择范围提供者实现

    Selection Range Provider是VSCode中用于实现层级化代码选择的API,通过注册provideSelectionRanges方法,按光标位置从内到外逐层扩展选择范围,如从变量名扩展至函数体;需结合AST解析构建准确的SelectionRange链式结构以提升选择智能性。 在 …

    2025年12月6日 开发工具
    000
  • VSCode终端美化:功率线字体配置

    首先需安装Powerline字体如Nerd Fonts,再在VSCode设置中将terminal.integrated.fontFamily设为’FiraCode Nerd Font’等支持字体,最后配合oh-my-zsh的powerlevel10k等Shell主题启用完整美…

    2025年12月6日 开发工具
    000
  • VSCode入门:基础配置与插件推荐

    刚用VSCode,别急着装一堆东西。先把基础设好,再按需求加插件,效率高还不卡。核心就三步:界面顺手、主题舒服、功能够用。 设置中文和常用界面 打开软件,左边活动栏有五个图标,点最下面那个“扩展”。搜索“Chinese”,装上官方出的“Chinese (Simplified) Language Pa…

    2025年12月6日 开发工具
    000
  • VSCode性能分析与瓶颈诊断技术

    首先通过资源监控定位异常进程,再利用开发者工具分析性能瓶颈,结合禁用扩展、优化语言服务器配置及项目设置,可有效解决VSCode卡顿问题。 VSCode作为主流的代码编辑器,虽然轻量高效,但在处理大型项目或配置复杂扩展时可能出现卡顿、响应延迟等问题。要解决这些性能问题,需要系统性地进行性能分析与瓶颈诊…

    2025年12月6日 开发工具
    000
  • VSCode的悬浮提示信息可以自定义吗?

    可以通过JSDoc、docstring和扩展插件自定义VSCode悬浮提示内容,如1. 添加JSDoc或Python docstring增强信息;2. 调整hover延迟与粘性等显示行为;3. 使用支持自定义提示的扩展或开发hover provider实现深度定制,但无法直接修改HTML结构或手动编…

    2025年12月6日 开发工具
    000
  • VSCode插件:GitLens使用详解

    GitLens是VSCode中强大的Git增强插件,提供行级代码追踪、提交历史浏览、版本对比、跨文件导航及与GitHub等平台集成;通过启用Current Line Blame和In-Line Blame,可实时查看每行代码的作者与修改时间;支持按分支、作者过滤提交记录,比较差异,并利用Go Bac…

    2025年12月6日 开发工具
    000
  • VSCode调试:快速定位与修复问题

    掌握VSCode调试技巧可提升开发效率。首先设置断点并配置launch.json文件,通过“运行和调试”面板启动调试;程序暂停时利用变量窗格查看数据状态,结合调用栈追溯函数执行路径;使用调试控制台动态执行代码、验证逻辑;针对高频调用场景,可设置条件断点(如i===100)或日志断点输出信息而不中断执…

    2025年12月6日 开发工具
    000
  • VSCode界面优化:精简布局与元素

    通过隐藏冗余组件和调整视觉元素可提升VSCode专注度。依次操作:1. 用Ctrl+B和Ctrl+J快捷键或设置隐藏侧边栏与面板;2. 在设置中关闭活动栏显示,并在settings.json中设置”window.titleBarStyle”: “inline&#8…

    2025年12月6日 开发工具
    000
  • 分布式系统下的JavaScript消息队列实现

    答案:在Node.js中通过集成RabbitMQ或Kafka实现分布式系统消息通信。使用amqplib连接RabbitMQ,创建通道并声明交换机与队列,通过publish发送、consume接收消息,保障可靠性与解耦;或采用kafkajs连接Kafka集群,生产者向topic发消息,消费者订阅处理,…

    2025年12月6日 web前端
    000
  • JavaScript持续集成与部署

    持续集成与部署(CI/CD)通过自动化测试、构建和部署提升JavaScript项目交付效率。1. CI指频繁合并代码并自动运行测试以快速发现错误;2. CD在CI通过后自动将应用部署至生产环境;3. 常用工具包括GitHub Actions、GitLab CI/CD、CircleCI和Jenkins…

    2025年12月6日 web前端
    000
  • VSCode后端:Flask应用调试指南

    答案:配置VSCode调试Flask需安装Flask、编写入口文件、在launch.json中设置调试参数,然后设断点并启动调试会话。具体步骤包括创建launch.json文件并配置program、env和args等选项,确保使用正确Python解释器,避免端口占用,最后通过运行和调试面板启动应用,…

    2025年12月6日 开发工具
    000
  • VSCode调试技巧:断点与变量监控

    VSCode调试功能强大,断点设置与变量监控是核心。2. 点击行号设断点,右键可配条件或日志断点,侧边栏统一管理。3. 暂停时通过变量面板、悬停提示、监视表达式实时查看值。4. 调用栈面板展示函数执行路径,点击可查各层上下文。5. 综合运用这些技巧能高效定位逻辑问题,提升调试效率。 调试是开发过程中…

    2025年12月6日 开发工具
    000
  • 如何管理和同步VSCode的扩展配置,以便在新设备上快速恢复开发环境?

    使用 Settings Sync 是最快方式,通过 GitHub 账号同步扩展、设置、快捷键和代码片段;也可手动导出扩展列表(code –list-extensions > extensions.txt)并在新设备安装,结合备份 settings.json 等配置文件实现环境快速恢…

    2025年12月6日 开发工具
    000
  • VSCode扩展包管理依赖解析

    VSCode扩展依赖通过package.json中的extensionDependencies声明,安装时自动解析并提示用户安装所需扩展,确保按顺序激活且禁止循环依赖,依赖间通过contributes.api共享功能,使用vsce打包时需手动处理生产依赖和性能优化,最终实现扩展间的协同运行与API调…

    2025年12月6日 开发工具
    000
  • Cloudinary 上传后临时文件未删除的解决方案与 React 错误排查

    本文旨在解决在使用 Cloudinary 进行文件上传后,临时文件未自动删除的问题,并提供针对 React UI 崩溃 “Objects are not valid as a React child” 错误的排查与修复方案。文章将深入探讨如何在文件上传完成后安全地删除临时文件…

    2025年12月6日 web前端
    000
  • VSCode代码转换:编码格式处理

    遇到乱码时先查看文件编码,点击右下角编码名称选择“通过编码重新打开”,尝试 UTF-8、GBK 等常用编码以正确显示内容;2. 确认后可选择“通过编码保存”将文件转换为 UTF-8 等标准编码,便于跨平台协作;3. 为避免重复操作,可在设置中将 “files.encoding&#8221…

    2025年12月6日 开发工具
    000
  • VSCode插件更新:保持功能兼容性

    更新VSCode插件需确保兼容性,避免配置失效或冲突。建议更新前检查依赖关系、阅读变更日志,确认API与版本适配;优先在预发布环境测试新版本;对关键项目通过extensions.json锁定推荐版本;更新后监控命令、语言服务等运行状态,发现问题及时回退。合理管理更新节奏可兼顾新特性与稳定性。 更新V…

    2025年12月6日 开发工具
    000
  • VS Code扩展生态剖析:API设计与商店发布全流程指南

    VS Code扩展成功源于其插件化架构与丰富API。通过Activation Events、Contribution Points和Extension Host实现高效稳定的功能扩展,结合vscode.commands、languages、window、workspace等核心API提供完整开发支持…

    2025年12月6日 开发工具
    000
  • VSCode快捷键:括号与缩进处理

    VSCode默认自动补全括号引号,可用Ctrl+Z撤销或设置中关闭;2. Enter或→可跳过自动闭合符号;3. Tab和Shift+Tab用于调整选中行的缩进;4. Shift+Alt+F格式化文件或选中代码,可设保存时自动格式化;5. 光标靠近括号时高亮匹配,Ctrl+Shift+快速跳转配对括…

    2025年12月6日 开发工具
    000
  • VSCode时间线:文件修改历史与代码追溯系统

    时间线功能是VSCode内置的代码追溯工具,通过整合Git历史记录提供文件修改的时间轴视图。用户可查看提交哈希、作者、时间、提交信息及变更行数,点击记录预览差异并还原版本。该功能依赖Git仓库,支持查看某行修改者、对比历史版本、恢复误删代码等操作,未启用Git时仅显示本地保存点。结合GitLens等…

    2025年12月6日 开发工具
    000

发表回复

登录后才能评论
关注微信