VSCode breakpoints disabled (greyed-out) when working with Typescript and Serverless Offline

Question

I am developing some Lambda functions using serverless-framework. The serveless-framework has been installed globally.

I am using Typescript and serverless-webpack.

I am also using serverless-offline to test locally.

Everything works fine except when I try to debug from within VSCode. The problem is that as soon as I start serverless-offline from the Debug facility of VSCode, all my breakpoints get greyed-out.

Here my configuration files

package.json

{
  "name": "backend-serverless",
  "version": "1.0.0",
  "description": "serverless backend",
  "main": "handler.js",
  "scripts": {
    "test": "mocha -r ts-node/register transform/src/**/*.spec.ts src/**/**/*.spec.ts",
    "tsc": "tsc",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/aws-lambda": "0.0.34",
    "@types/chai": "^4.1.2",
    "@types/mocha": "^5.0.0",
    "@types/node": "^9.6.0",
    "chai": "^4.1.2",
    "mocha": "^5.0.5",
    "serverless-offline": "^3.18.0",
    "serverless-webpack": "^5.1.1",
    "ts-loader": "^4.1.0",
    "ts-node": "^5.0.1",
    "typescript": "^2.7.2",
    "webpack": "^4.3.0"
  }
}

webpack.config.ts

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

module.exports = {
  devtool: 'source-map',
  entry: slsw.lib.entries,
  resolve: {
    extensions: [
      '.js',
      '.json',
      '.ts',
      '.tsx'
    ]
  },
  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js'
  },
  target: 'node',
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        use: [
          {
            loader: 'ts-loader'
          }
        ],
      }
    ]
  }
};

launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "name": "Current TS File",
            "type": "node",
            "request": "launch",
            "args": ["${relativeFile}"],
            "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Debug - Offline",
            "program": "/usr/local/bin/serverless",
            "args": [
              "offline",
              "start",
              "--lazy"
            ],
            "env": {
              "NODE_ENV": "development"
            },
            "outFiles": [
                "${cwd}/.webpack/**/*"
            ],
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "protocol": "inspector"
        }
    ]
}

tsconfig.json

{
    "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*.ts", "*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "typeRoots": [
    "node_modules/@types"
  ],
  "lib": [
    "es2016",
    "dom"
  ]
}

By the way, if I try to debug any normal function written in Typescript using the Current TS File launch configuration, all my breakpoints work perfectly. If I use the Debug - Offline launch configuration, then all breakpoints get greyed-out.

Answer 1

I believe this is a (recently introduced) bug in VSCode.

Evidence

I've been using serverless-webpack and serverless-offline with Typescript lambda functions for several months. Debugging with a setup very much like yours has never been a problem, until recently.

The symptoms you describe are easy to recreate with a fresh project created by

serverless create --template aws-nodejs-typescript

(plus the two plugins), using the latest VSCode (1.21.1).

Workaround

I'm not using React Native, but the workaround described in this issue works for me. After the debugger has started, and all breakpoints are grayed out, add a new breakpoint or remove and re-add an existing breakpoint. Either action seems to "wake up" the debugger, and the other breakpoints all bind.

Recently Introduced?

I rolled back my VSCode to 1.18.1, and the problem disappeared. I then stepped through a series of upgrades, and verified that 1.19.3 and 1.20.1 also seem to work fine.

Version 1.21.1 seems to be the only one that suffers from this bug. So if the workaround doesn't work for you, or you'd rather not use it, rolling back to VSCode 1.20.1 (or earlier) may solve your problem.

Notes

The launch.json configuration I use for this setup is pretty minimal, and usually looks like this:

{
    "type": "node",
    "request": "launch",
    "name": "Debug API Gateway",
    "program": "${workspaceFolder}/node_modules/serverless/bin/serverless",
    "args": [
        "offline",
        "start"
    ]
}

This configuration has always worked for me; I've never had to specify things like outFiles or sourceMaps to get debugging working with typescript, serverless-offline and serverless-webpack.