Debug Netlify Functions in VS Code

Profile picture for KyleMit
KyleMit

I'm trying to set a breakpoint inside of a netlify function that is executed via netlify dev with the following setup:

Setup

Install Netlify-CLI

npm install netlify-cli -g

netlify.toml

[build]
  functions = "functions/"

functions/hello.js

exports.handler = async(event, context) => {
    let output = `Hello, ${event.queryStringParameters.name}`
    return { statusCode: 200, body: output};
}

Here's a sample project with the setup

Run

You should be able to run normally via netlify dev

netlify dev screenshot

Which will expose the function at the following address:

<pre><code><a href="http://localhost:8888/.netlify/functions/hello?name=Kyle">http://localhost:8888/.netlify/functions/hello?name=Kyle</a></code></pre>

Debugging Attempts

Launch.config

In VSCode, you should be able to setup debugging with a launch.config. I've tried the following configuration

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\node_modules\\.bin\\netlify",
      "args": ["dev"]
    }
  ]
}

But I get the following error:

C:\Program Files\nodejs\node.exe .\node_modules\.bin\netlify dev
Uncaught c:\Users\kylemit\Documents\code\netlify-func\node_modules\.bin\netlify:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
<node_internals>/internal/modules/cjs/loader.js:991
Process exited with code 1

Node --inspect

There are lots of examples that leverage the --inspect switch` for node, but I can't figure out how to get that to work with VS Code Breakpoints.

Other Threads

From Tyson Matanich on any way to debug functions?, you can do the following:

package.json

{
  "scripts": {
    "debug": "netlify dev --inspect",
  }
}

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Node",
      "type": "pwa-node",
      "request": "launch",
      "runtimeArgs": ["run-script", "debug"],
      "runtimeExecutable": "npm",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

Example Screenshot