你的nest项目不要再使用console.log

前言

对于许多开发者而言，调试代码是一项日常任务，你是不是经常在调试的时候，后端接口很长时间没有返回，前端查看控制台一直在等待后端接口返回数据，一问，后端说他在debug，那么你想不想在nestjs里面也实现一下这样的功能。

虽然 前端console.log 是一种常用的调试方法，但它存在诸多局限性，也会导致代码里面充斥着大量的log代码，看起来非常不舒服。

相比之下，使用vscode的断点可以显著提升开发效率。

以下是以 Nest.js 项目为例的vscode开启断点调试指南。

为什么避免过度依赖 console.log？

• 精准度不足 ：console.log 需要开发者提前预判错误位置。然而，实际错误往往出现在未被打印的部分，这导致开发者不得不反复增删日志，陷入低效的试错循环。
• 异步调试困难 ：在处理 Promise 链、async/await 或 RxJS 流等异步操作时，日志的输出顺序可能与代码实际执行顺序不一致，从而误导开发者对问题的判断。
• 信息有限：日志只能展示静态值，无法提供调用栈、闭包变量、原型链等动态上下文信息，这对于诊断复杂的内存泄漏或作用域污染问题帮助有限。
• 性能与安全隐患：在生产环境中，遗留的日志语句可能降低应用性能，甚至泄露敏感信息。

VSCode 断点调试配置流程

以下是在 Nest.js 项目中配置 VSCode 断点调试的具体步骤：

环境准备

确保安装了以下插件：

• JavaScript Debugger：VSCode 的官方调试插件，适用于现代 JavaScript 调试。
• ESLint：帮助维持代码质量，减少语法错误对调试的干扰。

在 tsconfig.json 中启用 Source Map：

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "./dist"
  }
}

创建调试配置文件

在项目根目录下创建 .vscode/launch.json 文件：

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/main.ts",//项目的启动文件
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

配置编译任务

创建 .vscode/tasks.json 文件以定义 TypeScript 编译任务：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "build",
      "group": "build",
      "problemMatcher": ["$tsc"],
      "label": "npm: build"
    }
  ]
}

实战调试技巧

• 基础操作 ：在代码行号左侧点击设置断点，按下 F5 启动调试。

  前端调用的时候，后端接口就会停在断点位置,就可以查看对应的变量

  

• 高级功能：

  • 条件断点 ：右键断点并设置条件表达式，例如 userId === 'admin'。
  • 日志点：利用日志点输出变量值，而无需暂停程序执行。
  • 调用栈追踪：查看函数调用链，定位异步回调的源头。
  • 监视窗口：实时跟踪关键变量的变化情况。
  • 内存分析：捕获堆快照，识别内存泄漏问题。

为什么断点调试能提升效率？

• 全链路透视：在复杂的 Nest.js 中间件、守卫和拦截器中，断点调试能够完整展示请求上下文。
• 异步代码调试 ：在 RxJS 操作符链或 async/await 函数中，断点调试有助于理清数据流和执行顺序。
• 异常监控集成：结合 Sentry 等工具，利用 Source Map 快速定位生产环境中的错误根源。
• 团队协作 ：将 .vscode/launch.json 纳入版本控制，确保团队成员拥有统一的调试环境。

通过配置vscode的调试环境，您可以在短时间内显著提升调试效率，减少无效劳动时间，可以在花更多的时间去摸鱼~