Nest:调试项目及其源码(四)

使用 Visual Studio Code (VS Code) 进行调试

VS Code 中调试 Nest.js 应用:

  1. 打开 Nest.js 项目,nest start --debug 来启动 nest 服务。
  2. 点击侧边栏中的"调试"图标,然后点击"创建一个 launch.json 文件"。
  1. 选择 Node.js 环境。


  1. 在生成的 launch.json 文件中,添加或修改一个配置,以指定你的启动脚本。例如:
  1. 点击 Attach,在代码设置断点。
  1. 访问 http://localhost:3000,就会走进断点了。

如果用 npm run start:dev 跑项目调试,需要这样设置:

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

配置 "console": "integratedTerminal" ,输出在 debug console 才有颜色:

后面也是点击 ,打断点,浏览器访问了。

使用 Chrome DevTools 进行调试

  1. 启动 Nest.js 应用时,添加 --inspect--inspect-brk 标志。例如:
bash 复制代码
node --inspect-brk dist/main.js

--inspect-brk 会在第一行代码执行前暂停,这样你就有时间打开开发者工具并设置断点。

  1. 打开 Chrome 浏览器,输入 chrome://inspect 并回车。
  2. 在 "Remote Target" 部分,找到你的 Nest.js 应用并点击 "inspect" 链接。
  3. DevTools 将会打开,并且你可以在 "Sources" 标签页中设置断点。

它起了一个 websocket 服务,如果没有,就配置下 network target,加上 localhost:9229。

使用命令行工具

对于更喜欢命令行的开发者,可以使用 Node.js 自带的 inspect 命令行工具进行调试:

  1. 在命令行中启动你的应用,加上 --inspect 参数。例如:
bash 复制代码
node --inspect dist/main.js
  1. 在另一个命令行窗口中,运行 node inspect 连接到正在运行的应用。例如:
bash 复制代码
node inspect localhost:9229
  1. 使用命令行界面的调试命令进行调试。

使用 vscode 调试 Node 项目


调试 index.js,自动进入单行首行断柱:

也可以手动打上需要断柱的地方:

在 vscode 调试最方便的地方是可以边写代码,然后重启 debugger 继续调试看到最新效果:

手动 Node 执行调试 Node 项目

bash 复制代码
node --inspect-brk index.js

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

然后就和之前使用 Chrom DevTools 调试一样,打开 chrome://inspect/ 连接就行了。

Nest 自带的 debugger

nest start --debug 来启动 nest 服务,原理就是 node --inspect

我们也可以在 controller 里加个 debugger 后运行项目调试:

然后等待对应的请求进断点即可。

调试 Nest 源码

  • 下载 Nest 源码
bash 复制代码
git clone --depth=1 --single-branch https://github.com/nestjs/nest

--depth=1 是下载单 commit,--single-branch 是下载单个分支

  • npm run build 出一份带有 sourcemap 版本的代码(修改 packages/tsconfig.build.json)
  • 创建调试配置:
json 复制代码
{
    "name": "调试 nest 源码",
    "request": "launch",
    "runtimeArgs": [
        "run-script",
        "start:dev"
    ],
    "runtimeExecutable": "npm",
    "console": "integratedTerminal",
    "cwd": "${workspaceFolder}/sample/01-cats-app/",
    "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        // "!**/node_modules/**"
    ],
    "skipFiles": [
        "<node_internals>/**"
    ],
    "type": "node"
}

resolveSourceMapLocations 是从哪里找 sourcemap,默认排除掉了 node_modules

这样就可以在 sample/01-cats-app 的 src/cats/cats.controller.ts 打个断点,然后点击 debug 调试:

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin91539 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek