如何调试node&npm？

发表于
本文字数： 638 阅读时长 ≈ 1 分钟

如何使用尝试的IDE（VSCode & Webstorm）调试node&npm程序？本篇通过真实的案例（图片教程）介绍了调试方法

调试技能是程序员的基础技能，学会调试程序：

  • 可以方便的找到程序的入口
  • 可以找到运行过程中的逻辑问题（Bug）
  • 可以理解程序执行的逻辑
  • 可以了解函数之间的调用关系
  • …

调试原理

在node的命令中提供了一个参数--inspect-brk，或者--inspect=9100指定调试端口，通过加入这个inspect参数，即可以实现调试Node程序的目的。

例如，如果需要调试webpack：

1
2
3
node --inspect-brk ./node_modules/.bin/webpack
Debugger listening on ws://127.0.0.1:9229/42e65994-934b-470c-b531-347ba54c7ac8
For help, see: https://nodejs.org/en/docs/inspector

然后就可以打开chrome进行连接了：

如果提示Debugger Attached，说明调试连接成功:

结合VSCode

需要借助到vscode强大的调试功能（PS：webstorm等IDE的配置思路一致）

小齿轮快速添加

点击小齿轮默认添加node.js结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${file}",
      "outFiles": [
        "${workspaceFolder}/**/*.js"
      ]
    }
  ]
}

从上面的配置中可以读出一点信息：

  • vscode调试是在Launch Program，打开一个程序，或者说运行一个程序
  • 文件是哪个呢？${file}即你打开的.js文件

关于上面的配置信息可以参考：

调试尝试：

手动添加脚本

自动生成的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "type": "node",
  "request": "launch",
  "name": "Launch via NPM",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run-script",
    // 下面的一行调整成你的启动脚本
    "start:dev"
  ],
  "port": 9229,
  "skipFiles": [
    "<node_internals>/**"
  ]
},

打断点进行调试：

发起请求，就可以看到停到断点了：

还可以在调试Console中看到各种调试信息。

Webstorm配置

如图，原理一样，配置简单（点击放大）

步骤：

  • 添加配置
  • 选择npm
  • 选择调试脚本
  • 打上断点
  • 开启调试
相关文章