Debugging `serverless-offline` with vscode debugger

Problem

When using vscode as a IDE and the framework is serverless-offline.
If you try to debug typescript code with breakpoint, it may not work properly.

TL; DR;

Set up serverless-esbuild configuration in serverless.yml

custom:
  esbuild:
    bundle: true
    platform: node
    target: node18
    sourcemap: true          # THIS WILL MAKE THE BREAKPOINTS ON TS FILE WORK
    sourcesContent: true
    keepNames: true

Detailed Configuration

• IDE: vscode
• Framework: serverless
• Local runtime: serverless-offline
  • Run local debug server with
    bash

    sls offline

• Development language: typescript
• Build with: serverless-esbuild

In normal case, any node process can be debugged with vscode with JavaScript Debug Terminal. but, when running sls offline, it seems the debugger session is attached to the process but the breakpoints are not working. After several googling, there were try launch.json configuration, use SLS_DEBUG and etc.

And I found that the breakpoint work in files .esbuild/.build/src/*.js, and the last magic is to configure serverless-esbuild(as seen above)

Here is my serverless configration snippet

service: my-flea-market-api

frameworkVersion: '3'
plugins:
  - serverless-esbuild
  - serverless-offline
custom:
  esbuild:
    bundle: true
    platform: node
    target: node22
    sourcemap: true          # 핵심
    sourcesContent: true     # 추천(WSL/컨테이너/상대경로 꼬임 방지)
    keepNames: true          # 선택(스택트레이스 가독성)
  serverless-offline:
    httpPort: 3001

functions:
  likeItem:
    handler: src/handlers/likeItem.handler
    events:
      - http:
          path: /items/{slug}/like
          method: post
          cors: true