多种场景下如何 Debug (Node.js)

三只萌新
722 阅读2分钟

前言

本文主要说明下

  • 如何在 VS Code 中使用 Launch Configuration 方式和 Attaching 进行断点调试。
    • 包括一些常用的配置项例如: args、program、env、runtimeArgs 等参数的意思和使用。
  • 通过不同启动方式如何配置 Launch.json 文件。例如 node app.js 、nodemon app.js、 pm2 start app.js
  • 如何在 Typescript 文件中进行断点调试
  • 调试时如何实现保存热更新

如何你对上面的话题感兴趣，可以继续往下看......

launch.json

首先创建 launch.json 文件，该文件包含 Debug 的一些配置项。

来看下 VS Code 为我们创建的一些默认的配置项包含了哪些

  • cwd: 当前文件夹，作为依赖查询的相对目录。
  • type: 表示 node 项目
  • request: 有 launch 和 attach两种方式。
    • launch 直接启动脚本
    • attach 到已经启动脚本所在的端口
  • name: 为 debug 配置起个名字，随意起只要能区分
  • program: 脚本执行的绝对路径，${workspaceFolder}表示 VS Code所在文件夹。
  • env: 环境变量
  • args: 传递给运行脚本的参数
{
  "configurations": [
      {
          "env": {
            "SERVER_ENV": "dev",
          },
      }
  ]
}

Launch configuration attributes
Variables Reference

启动 js 文件

launch方式
当我们配置好 Launch.json 文件后可以开始 debug

image.png 当我们启动项目就会命中断点处。

attach 方式
针对 attach debug 方式，我们需要额外添加 debug 配置参数。

{
  "configurations": [
    {
      "name": "Attach",
      "port": 9000,
      "request": "attach",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "type": "pwa-node"
    }
  ]
}

来看下 attach 和 launch 不同的配置项

  • port: debug 的端口
  • request: 使用 attach 模式

可以看到这种模式需要 attach 到一个已经启动 node.js 脚本的端口上。

  1. 首先我们启动脚本
node --inspect=9000 app.js // 默认端口是 9229
  1. 然后点击 attach 按钮进行 debug
  1. 当我们访问 http://localhost:3005/ 地址命中埋点。

其实步骤二还有其他方式代替，甚至可以省略。
当我们完成步骤1时，我们可以不去配置 launch.json 文件，按 commond + shift + p

image.png

然后选择 Attach to Node Process 效果和步骤2相同。

如果你觉得每次要执行进行选择也比较麻烦，你可以使用 auto attach

image.png

image.png 当我们执行 node app.js 就会自动 attach。

pm2 start 如何 debug

{
  "name": "learn_koa",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "pm2": "pm2 start pm2.config.js"
  }
}

通过 pm2 的配置文件想 node 传递 --inpect 参数，由于我们之前设置过 auto attach ，所以当我们启动时候，就会自动捕捉到断点。

module.exports = {
  apps:[
    {
      name:"learn-koa",
      script: "./app.js",
      "log_date_format" : "YYYY-MM-DD HH:mm Z",
      "watch": true,
      "node_args":"--inspect"
    }
  ]
}

启动 ts 文件

launch模式
首先我们需要安装 typescript 和 ts-node

yarn add typescript ts-node -D

添加 launch debug 配置文件

{
  "configurations": [
    {
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.ts",
      "request": "launch",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "type": "pwa-node",
      "runtimeArgs": [
        "-r",
        "${workspaceFolder}/node_modules/ts-node/register"
      ]
    }
  ]
}
  • runtimeArgs: 执行时候传递参数

上面的代码相当于

node --inspect=DEBUG_PORT /node_modules/ts-node/register app.ts

image.png

debug 时代码热更新
需要借助 nodemon 的能力。

  1. 首先我们在 package.json 中定义
{
  "name": "learn_debug",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "debug": "nodemon app.ts",
  } 
}
  1. 更新 launch.json 文件
{
  "configurations": [
    {
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.ts",
      "request": "launch",
      "runtimeExecutable": "npm",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "type": "pwa-node",
      "runtimeArgs": [
        "run-script",
        "debug"
      ]
    },
   ]
}

来看下和之前的 debug 文件有什么不同。

  • runtimeExecutable: 运行时可以执行的绝对路径默认值时 node, 支持的值有 npm 、nodemon（需要安装）
  • runtimeArgs: 执行时候传递的参数，当 runtimeExecutable 为 npm 时候，第二个参数表示要执行的 script 的名称。这里我们要执行的是 debug 脚本。

上面代码相当于执行

node --inspect=DEBUG_PORT nodemon -r app.ts

当 nodemon 监听文件发送变化就会重新执行 launch 的 npm 脚本。

image.png

结语

当我们了解了多种 debug 方式，我们可以在不同场景下选择合适的方式进行调试来提高我们的效率。不然总是 console.log 效率还是比较低的😄

参考

how to debug
address already in use
Node 调试工具入门教程

avatar
文章
阅读
粉丝