如何使用 VSCode 调试 Node.js 应用程序

举报
liuzhen007 发表于 2022/06/22 23:46:20 2022/06/22
【摘要】 前言调试是软件开发中必不可少的环节,它可以帮助开发人员在软件发布之前修复问题。调试工具可以集成到代码编辑器中,使调试过程更加高效。本文将展示如何在 Visual Studio Code 中调试 node.js。什么是 Node.js?Node.js是一个 JavaScript 运行时环境,允许在浏览器之外运行 JavaScript 代码。它不是一个框架,而是一种基于 Chrome 的 V8 ...

前言

调试是软件开发中必不可少的环节,它可以帮助开发人员在软件发布之前修复问题。调试工具可以集成到代码编辑器中,使调试过程更加高效。本文将展示如何在 Visual Studio Code 中调试 node.js。

什么是 Node.js?

Node.js是一个 JavaScript 运行时环境,允许在浏览器之外运行 JavaScript 代码。它不是一个框架,而是一种基于 Chrome 的 V8 JavaScript 引擎构建的技术,允许它用于服务器端应用程序和命令行工具开发。它在物联网 (IoT) 上也很流行。Node.js 拥有庞大的开发者社区,他们创建了各种各样的模块,并且可以在任意项目中使用这些模块。

Node.js 应用程序是用 JavaScript 编写的应用程序,可以在具备 Node.js 运行时环境的服务器上执行。 这些应用程序通常构建在流行的 JavaScript 框架和库上,例如Express、React、Angular 和 Vue。

Node.js 的主要特点是:

  • 它是一个开源的服务器端JavaScript 运行时环境。
  • Node.js 是一个跨平台的运行时环境,因此在服务器端运行 JavaScript 代码。
  • 用 JavaScript 编写的应用程序,可以在 OS X、Microsoft Windows 和 Linux 上的 Node.js 运行时中运行。
  • 应用程序是单线程的
  • 它是异步的,可以同时处理多个请求, 而无需等待每个请求完成后再处理下一个请求。
  • 基于事件驱动的非阻塞 I/O 模型,让Node.js更加轻量和高效。
  • 它是MIT 协议许可。

虽然,Node.js具备上述优势,但是调试还是无法避免的。

在 VSCode 中调试 Node.js 的步骤

先决条件

在开始之前,要满足以下两点要求:

  • 你已经安装了 Node.js
  • 你有 VSCode

写一段带有错误的简单 Node.js 程序。

创建一个app .js文件,代码内容如下:

const calculate = (A, B) => {
  console.log('Adding...')
  let sum = 0
 
  sum = A + B + B + A
  return sum
 }
 
 const num1 = 1
 const num2 = 1
 
 const result = calculate(num1, num2)
 console.log(num1 + ' plus ' + num2 + ' = ' + result)

使用命令 node app.js 运行程序,输出结果如下:

Adding...
 1 plus 1 = 4.

使用 VSCode 调试工具

VSCode 内置了一个调试工具,开发人员可以使用它来调试 Node.js 应用程序。 此工具位于左侧面板上,如下图所示:

image.png

接下来,单击“创建和启动.json 文件”并选择node.js。

image.png

image.png

文件配置信息如下:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\src\\app.js"
        }
    ]
 }

有时,可能会因为当前工程的文件目录设置或版本的原因,导致分配给程序的值可能与应用程序的入口主文件不匹配。对于这种特殊情况,需要将手动修改主文件——通常是 app.js 或 index.js 之类的文件。然后,保存并退出文件。

image.png

image.png

当单击运行旁边的播放按钮时,就会通过调试器启动并运行程序。调试器控制台输出 Process exited with code 0,就表示程序运行正常。

调试 node.js 应用程序的过程

如果要调试 app.js 文件,就可以将鼠标悬停在对应的行号上单击红点来设置断点。断点是 VSCode 调试器停止或暂停程序执行的地方,以便检查变量中的状态变化

image.png

注意查看窗口 UI 的顶部,会有如下所示的控制面板:

image.png

如上图所示,其中涉及的每个控件的含义如下:

  • 继续 (F5) 将运行过断点并继续执行程序的其余部分,直到遇到下一个断点。
  • Step over (F10) 调试器会执行到下一行。
  • Step into (F11) – 调试器进入以下函数。
  • Step out (F12) – 调试器从函数中跳出并进入下一步。
  • Restart (Ctrl+shift+F5) – 重新启动整个调试器。
  • 停止 (shift+F5) – 停止调试过程并退出。

使用 Lightrun 工具调试代码

虽然在开发过程中调试代码非常容易——但在生产环境中调试确实另外一回事儿。 当生产环境中出现错误时,肯定不能简单地关闭服务器并取下代码进行调试。不仅如此,在开发环境中完全复现生产环境中的错误也是不可能的。这就是 Lightrun 可以发挥作用的地方。

Lightrun 是一种调试工具,可以让开发人员能够实时查看其代码的执行情况。 它提供了一个直观的界面,可以轻松地将日志、性能指标和快照添加到代码库中。与传统的内部调试工具相比,Lightrun 具有多个优势,例如提高了代码的可见性以及更容易识别和修复错误。

该工具更快、更高效,因此开发人员可以花费更少的时间对代码进行故障排除。使用该工具也不会影响应用程序的性能,这对于生产环境至关重要。

Web 版 Lightrun 现已推出!

Lightrun 的 Web 版本现在已经发布了,需要零集成或配置。 也期待 Lightrun 提供的所有强大的 IDE 功能和特性,现在完全在浏览器上运行,用户可以更方便地访问。 

可以直接从浏览器连接到实时应用程序,而无需下载专用插件。 Lightrun 是一个功能丰富、用户友好且随时可用的平台。



作者简介:😄大家好,我是 Data-Mining(liuzhen007),是一名典型的音视频技术爱好者,前后就职于传统广电巨头和音视频互联网公司,具有丰富的音视频直播和点播相关经验,对 WebRTC、FFmpeg 和 Electron 有非常深入的了解,😄公众号:玩转音视频。同时也是 CSDN 博客专家(博客之星)、华为云享专家(共创编辑、十佳博主)、51CTO社区编辑、InfoQ 签约作者,欢迎关注我分享更多干货!😄

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。