Debugging servlerless offline function with VSCode - source map issue?

Question

I have created a simple mail function for AWS Lambda using serverless. For development, I am using serverless-offline to replicate the functionality of Lambda and using VSCode as my IDE. I am also using serverless-webpack to generate my resultant code.

When setting breakpoints in my code in VSCode, they are hollowed out and are flagged as "Unbound" and do not trigger but when I insert a debugger; statement, execution halts as it should. (as a side note, execution halts with debugger; and places me in my source file - not my resultant file - unsure why this is - webpack magic? I've set no sourcemaps here which may be part of the issue here but really unsure)

My launch.json config for VSCode to start up my debugging instance of serverless-offline is:

    {
        "name": "serverless",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceFolder}/serverless",
        "runtimeExecutable": "/home/me/.nvm/versions/node/v14.7.0/bin/npm",
        "runtimeArgs": [
            "run",
            "debug"
        ],
        "port": 9229
    }

The triggered npm script is:

"debug": "export SLS_DEBUG=* && node --lazy ./node_modules/.bin/serverless offline -s dev"

The config used by serverless-webpack (purely so I can inject some env vars) is:

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

const stage = slsw.lib.options.stage == 'prod' ? 'production' : 'development'

module.exports = {
    mode: stage,
    entry: slsw.lib.entries,
    target: 'node',
    plugins: [
        new Dotenv({
            path: path.resolve(__dirname, '../.env.'.concat(stage)),
            safe: false,
            allowEmptyValues: false,
            silent: false
        })
    ]
}

Any help appreciated! Just would like to know how to debug this normally with regular breakpoints and not have to rely on inserting debugger; whever I want to inspect running code.

Answer 1

My team hit a similar issue to this using serverless-bundle which basically is just an abstraction layer on top of serverless-webpack. What helped in our case was to add something like the following to our debug configuration object:

"sourceMapPathOverrides": {
  "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
  "webpack://?:*/*": "${workspaceFolder}/.webpack/*"
}

Note that paths from ${workspaceFolder} may be different based on your project structure. This isn't exactly what's in ours since we're using input variables in the paths, but the keys starting with webpack: are the important part and should help you get what you're after