【Nest源码系列】如何优雅调试Nest源码

之前写过关于调试Nest应用的各种技巧 【前端调试】如何优雅调试Nest,再来看源码是如何调试的。

从GitHub下载一份源码,执行:

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

--depth=1会下载最近的单个commit,--single-branch来取单个分支,这样速度就快很多了,拉源码看一般都这么干,我这里拉的是10.2.7版本。

前面第一篇《Nest源码目录设计》里面提到samples里面有官方的案例项目,我们会通过里面的项目来调试源码,首先在根目录下运行npm install安装Nest源码需要的基本依赖。

第二步是构建Nest源码。

我们项目中通过npm下载的Nest包依赖是没有sourcemap的,如果想要调试Nest的TS源码,就必须要用到sourcemap了,得自己构建。来看看Nest是如何构建的

执行build命令时,首先通过tsc对packages的包进行编译,完成之后通过执行move命令,move:node_modules是通过gulp工具来执行的,看这里

意思就是通过tsc编译之后,将产物移动到node_moduels/@nestjs目录下,我们使用的就是这个目录的依赖了,来运行一下

这里就有刚构建完成的包了,但实际上只有.js.d.ts结尾的文件,并没有.map文件

修改tsc打包配置

找到packages下的tsconfig.build.json文件,我们把sourceMap改为true,同时新增一个inlineSources,表示将源代码内嵌在生成的.map文件中,这样调试的时候就可以通过.map文件直接找到源代码。

再来运行一下npm run build,这时候就可以看到生成了.map映射文件,同时js文件里面也生成了映射URL

并且.map文件中也有了ts源代码的映射

启动服务

以samples中的01-cats-app为例,我们在这个目录下把服务跑起来,将launch.json配置改为如下

kotlin 复制代码
{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Nest源码调试",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run-script",
        "start:dev"
      ],
      "skipFiles": [
        "<node_internals>/**"
      ],
      "resolveSourceMapLocations": [
        "${workspaceFolder}/**",
        // "!**/node_modules/**"
      ],
      "cwd": "${workspaceFolder}/sample/01-cats-app/"
    },
    
  ]
}

runtimeArgs 是命令行启动参数,cwd是指在这个目录下运行命令,resolveSourceMapLocations 是用来查找sourcemap位置的,默认忽略了node_modules,但我们刚好要去这里查,把它注释掉。

点击调试,在我打的断点处停住了

释放断点,可以看到这时候调试的就是ts源码了

小结

Nest的打包步骤很简单,通过tsc编译typescript代码,然后将产物移动到node_modules/@nestjs下就完成构建,所以我们可以直接修改tsc的打包配置生成sourcemap。

在launch.json中配置指定cwd运行目录来启动samples下的项目,通过resolveSourceMapLocations指定sourcemap的查找位置,这样就可以轻松在项目中调试任何Nest源码了。

相关推荐
啦啦91188629 分钟前
【版本更新】Edge 浏览器 v142.0.3595.94 绿色增强版+官方安装包
前端·edge
蚂蚁集团数据体验技术1 小时前
一个可以补充 Mermaid 的可视化组件库 Infographic
前端·javascript·llm
LQW_home1 小时前
前端展示 接受springboot Flux数据demo
前端·css·css3
q***d1731 小时前
前端增强现实案例
前端·ar
IT_陈寒1 小时前
Vite 3.0 重磅升级:5个你必须掌握的优化技巧和实战应用
前端·人工智能·后端
JarvanMo1 小时前
Flutter 3.38 + Firebase:2025 年开发者必看的新变化
前端
Lethehong1 小时前
简历优化大师:基于React与AI技术的智能简历优化系统开发实践
前端·人工智能·react.js·kimi k2·蓝耘元生代·蓝耘maas
华仔啊1 小时前
还在用 WebSocket 做实时通信?SSE 可能更简单
前端·javascript
鹏北海2 小时前
多标签页登录状态同步:一个简单而有效的解决方案
前端·面试·架构
_AaronWong2 小时前
基于 Vue 3 的屏幕音频捕获实现:从原理到实践
前端·vue.js·音视频开发