Debugging netlify functions in vscode

Support
1

trying to get netlify function debugging to work in vscode but the breakpoints don’t work.

I have this file in my root folder to create the sourcemap (since I’m using netlify-lambda to be able to use syntax such as “import”):

//webpack.lambda.js
module.exports = {
  optimization: {minimize: false},
  devtool: "source-map",
  target: "node",
}

I have this in my package.json:

  "scripts": {
    "build:lambda": "netlify-lambda build src/utilities/lambda --config ./webpack.lambda.js",
    "debug": "netlify dev --inspect"
  }

And this in vscode’s launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Netlify Debugging",
            "type": "pwa-node",
            "request": "launch",
            "program": "${workspaceFolder}\\node_modules\\.bin\\netlify",
            "runtimeArgs": [
                "run-script",
                "debug"
            ],
            "runtimeExecutable": "npm",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "sourceMapPathOverrides": {
                "webpack:///./*": "${workspaceFolder}/src/utilities/lambda/*",
            },
            "resolveSourceMapLocations": [
                "${workspaceFolder}/**",
                "!**/node_modules/**"
            ]
        }
    ]
}

I cannot get breakpoints to work though. Soon as I start debugging all breakpoints turn into “unbound breakpoints”.

I am using create-react-app. Not sure if that matters.

2

Hi @ShaCP,

Why this doesn’t work for you in VSCode is something VSCode can answer better probably.

However, if import statements is your only requirement, you can check out esbuild support in Netlify CLI: Modern, faster Netlify Functions: New bundler and JavaScript features. Maybe that would give you different results?