VSCode调试AWS SAM+Webpack+TSyringe项目断点失效问题排查

我们开发团队采用VSCode调试AWS SAM，因依赖TSyringe引入了Webpack。目前调试器能成功连接SAM并显示index.mjs，但所有断点都不生效。

项目构建后的拓扑结构：

- .aws-sam
  - build
    - MyFunction
        - app.js
        - app.js.map

- src
  - app.ts

app.js.map内容示例：

{"version":3,"file":"./.aws-sam/build/MyFunction/app.js","mappings": "blah blah blah" }

当前launch.json配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "MyFunction",
      "type": "node",
      "request": "attach",
      "address": "localhost",
      "port": 5858,
      "localRoot": "${workspaceFolder}/src",
      "remoteRoot": "/var/task",
      "outFiles": [
        "${workspaceFolder}/.aws-sam/build/PaymentFunction/**/*.js"
      ],
      "sourceMaps": true
    }
  ]
}

请问遗漏了哪些配置？

以下是几个关键的配置修正点：

• 修正outFiles路径：launch.json中outFiles指向的PaymentFunction是错误的，实际构建产物在MyFunction目录，修改后：

  "outFiles": [
    "${workspaceFolder}/.aws-sam/build/MyFunction/**/*.js"
  ]
  

• 调整Webpack的Source Map生成规则：当前app.js.map的file字段使用了绝对路径，导致调试器无法正确映射本地源码。在Webpack配置中添加/修改以下设置：

  module.exports = {
    devtool: 'source-map', // 确保生成完整的source map
    output: {
      // 其他输出配置
      devtoolModuleFilenameTemplate: '../[resource-path]' // 生成相对构建目录的路径，指向src下的ts文件
    }
  };
  

  重新构建后，source map中的路径会正确对应本地src/app.ts。

• 添加resolveSourceMapLocations配置：在launch.json的配置项中加入该字段，帮助调试器定位source map文件：

  "resolveSourceMapLocations": [
    "${workspaceFolder}/.aws-sam/build/MyFunction/**",
    "/var/task/**"
  ]
  

• 确认SAM启动命令带调试端口：启动本地SAM服务时必须指定调试端口，否则无法attach调试器，示例命令：

  sam local start-api --debug-port 5858
  

  或针对单个函数调用：

  sam local invoke MyFunction --debug-port 5858
  

内容的提问来源于stack exchange，提问作者Jason