nestjs学习6:如何优雅调试nestjs

2,066 阅读3分钟

很多人都是用 console.log 调试的,哪怕工作很多年依然是这样,这样有个致命的缺点:

你只能看到某个点的变量值,而看不到代码的整个执行路线。

对于复杂的项目来说,会用断点调试是必须的,因为这样可以看到作用域、调用栈,也就是代码的执行路线,然后单步运行来看变量的变化。

image.png

所以这一节来学下如何调试 nest 项目。

首先,先看下 node 调试,创建个项目:

mkdir debug-test 
cd debug-test 
npm init -y

添加 index.js:

const os = require('os');
const homedir = os.homedir();
console.log(homedir);

通过 os 模块拿到了 home 目录的路径。

直接执行node index.js会输出结果。我们以调试模式跑起来:

node --inspect-brk index.js

image.png

--inspect 是调试模式运行,而 --inspect-brk 还会在首行断住。

可以看到,它起了一个 ws 服务。

然后我们用调试客户端连上它,比如用 Chrome DevTools。

浏览器地址栏输入 chrome://inspect/,可以看到可以调试的目标:

image.png

如果没有,就配置下 network target,加上 localhost:9229

image.png

点击 inspect 就可以看到调试界面了:

image.png

代码在首行断住了,右侧也可以看到作用域和调用栈。

nest 也是 node 项目,自然也是这样来调试的。

nest start 有个 --debug 的选项,

image.png

原理就是 node --inspect。

这时候 inspect 发现啥也没:

image.png

因为 --inspect 并不会和 --inspect-brk 一样在首行断住。

我们在 controller 里加个 debugger:

image.png

然后访问下 http://localhost:3000

这时候你会发现代码在断点处断住了:

image.png

这样,就可以调试 nest 项目了。

但是这样调试还是太麻烦,我们一般在 VSCode 里写代码,能不能直接在 VSCode 里边写代码边调试呢?

当然是可以的。VSCode 也实现了 Debugger 的客户端。

点击调试面板的 create launch.json file,它会创建 .vscode/launch.json 的调试配置文件,然后输入 node,快速创建一个 node 调试配置:

image.png

我们先调试下前面那个 index.js 文件:

image.png

stopOnEntry 是在首行断住,和 --inspect-brk 一样的效果。

这样,就可以在 vscode 里调试 node 代码了。在 vscode 里调试代码,最爽的是可以边改代码边调试。

比如你调试的过程中修改了代码,然后点击重新调试,就可以马上看到改动之后的效果。

nest 自然也可以这样调试:

还是 nest start --debug 来启动 nest 服务, --debug 就是以调试模式启动进行,它就会开启一个ws服务,端口是9229,这样调试器才能连到这个服务上。

image.png

添加一个 attach 类型的调试配置:

image.png

276a82c43f8749d587d12df02c9281c1~tplv-k3u1fbpfcp-jj-mark_1512_0_0_0_q75.awebp

然后在 controller 里打个断点,访问 http://localhost:3000, 代码同样会在断点处断住。

这样就可以直接在 vscode 里打断点了。

不过如果是用 VSCode 调试,可以不用 nest start --debug,有更简便的方式:

image.png

创建 npm scripts 的调试配置:

(如果创建出的调试配置 type 是 pwa-node 也可以,和 node 类型差不多,据说 pwa-node 功能多一点)

{
    "type": "node",
    "request": "launch",
    "name": "debug nest",
    "runtimeExecutable": "npm",
    "args": [
        "run",
        "start:dev",
    ],
    "skipFiles": [
        "<node_internals>/**"
    ],
    "console": "integratedTerminal",
}

和我们命令行执行 npm run start:dev 一样。

image.png

这里的 runtimeExecutable 代表执行什么命令,args 传参数。

要指定 console 为 integratedTerminal,也就是用 vscode 的内置终端来打印日志,不然默认会用 debug console 跑,那个没有颜色。

image.png

点击调试模式启动:

0a5fab63d75b4cf6beafeddaf7afc597~tplv-k3u1fbpfcp-jj-mark_1512_0_0_0_q75.awebp