使用TypeScript与Serverless Offline时VSCode断点变灰禁用问题求助

嗨，我之前也碰到过一模一样的问题！断点变灰本质上是VSCode没法把你的TypeScript源码和webpack编译后的JS文件关联起来，核心就是源映射（source maps）没配置对。下面一步步帮你排查解决：

第一步：检查TypeScript配置 #

先确保你的tsconfig.json里开启了source map生成，这是基础：

{
  "compilerOptions": {
    "sourceMap": true, // 必须设为true
    "target": "ES2020", // 匹配Lambda runtime版本，比如node18.x对应ES2020
    "module": "commonjs",
    "outDir": "./dist",
    // 其他配置...
  }
}

第二步：配置webpack正确生成source maps #

webpack.config.js里要指定devtool，同时确保mode是development（生产模式会自动移除source maps）：

const path = require('path');
const slsw = require('serverless-webpack');

module.exports = {
  mode: 'development', // 调试时一定要用development
  devtool: 'source-map', // 生成外部source map文件，推荐这个
  entry: slsw.lib.entries,
  target: 'node',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
  },
};

第三步：确保serverless-webpack插件启用source map #

在你的serverless.yml里，要明确告诉serverless-webpack生成source maps：

service: backend-serverless

plugins:
  - serverless-webpack
  - serverless-offline

custom:
  webpack:
    webpackConfig: ./webpack.config.js
    includeModules: true # 按需打包node_modules
    sourceMap: true # 关键！开启这个才会把source maps传给serverless-offline
    packager: npm # 或者yarn，根据你的包管理器来

provider:
  name: aws
  runtime: nodejs18.x
  # 其他provider配置...

functions:
  # 你的函数定义...

第四步：修正VSCode的launch.json配置 #

这一步最容易踩坑，要让VSCode知道编译后的JS文件位置，并且启用source map解析。在.vscode/launch.json里配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Serverless Offline Debug",
      "program": "${workspaceFolder}/node_modules/serverless/bin/serverless",
      "args": ["offline", "start", "--noPrependStageInUrl"],
      "sourceMaps": true, // 必须开启
      "outFiles": ["${workspaceFolder}/.webpack/service/**/*.js"], // 指向webpack编译后的文件
      "skipFiles": ["<node_internals>/**"], // 跳过node内部文件，避免调试时跳进去
      "console": "integratedTerminal", // 在集成终端显示日志
      "env": {
        "NODE_ENV": "development" // 确保环境是开发模式
      }
    }
  ]
}

最后：清理缓存重新编译 #

有时候旧的编译文件会干扰，执行下面的命令清理后重新启动：

rm -rf .webpack
serverless webpack

做完这些步骤，再启动VSCode的调试，断点应该就能正常命中了！如果还是不行，可以检查一下serverless-webpack和serverless-offline的版本，尽量用最新的稳定版，避免版本兼容问题。

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