在VS Code中如何debug NestJS前后端工程

我们以一个Monorepo的工程为例，前端是AngularJs写的，后端是NestJs写的,来记录一下最简单的debug办法。

要debug之前，先创建launch.json。

然后就点击Add Configuration新增一个debug的方式，接着就可以点击左手边的箭头，启动我们刚刚创建的debug模式。

Debug前端工程

首先，要确定你Build出来的代码是有source map，这样vscode才能根据在浏览器中执行的代码，找到vscode的源码，也才能够在vsCode中打断点。

• Step1 启动工程：一种方式是以开发模式启动工程，让它处于热更新状态，另外一种就是build的时候选择development模式，让build出来的文件有source map,然后跑start命令。
• Step2 添加Configuration "Chrome launch", 然后编辑url为你自己的启动的url

• Step3 解决SourceMap找不到的问题: SourceMap生成的是一个虚拟的路径，而VS code需要把它映射成真实的磁盘路径，对于常规的单体项目，VSCode可以推断到映射到路径。

webpack:///src/* 自动映射到你项目的 src/*

webpack:///* 自动映射到你项目根目录

对于路径结构比较深或者是像我这样带有子工程名称的Monorepo，VSCode可能会猜错，就需要我们手动去设置。

至于怎么覆盖，这里有两种办法。
第一种是在启动debug后，在debug的窗口打.script，等它输出分析结果（可能会卡死）

第二种是直接打开编译后打.map文件，搜索sources,找到类似于webpack:///的配置，然后开始抄过去。

或者像我这样，贴报错，叫AI帮我解决哈哈。

Debug后端工程

Debug Nestjs后端工程主要有两种方式。

Attach

第一种是通过attach的办法。

先在script后面添加--debug, 然后破npm run start启动起来。

"start": "nest start --debug",

然后打开launch.json，直接添加一个attach to nodejs。

启动这个attach的debug,就可以在后端代码中打断点了。

Launch via npm

添加这个配置

然后修改为我们的启动脚本，比如我这里是用npm run start:dev启动，就改成run，start:dev。

然后跑debug脚本，就可以以debug模式启动工程，然后打了断点就可以进去了。