Debug Netlify Functions in VS Code

796 Views Asked by At

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:

http://localhost:8888/.netlify/functions/hello?name=Kyle

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

2

There are 2 best solutions below

3
On

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

0
On

This is how I debug Netlify functions. (Sorry, not VSCode but I find this easier than VSCode launch.json configs.)

  1. Install netlify-cli global: npm install -g netlify-cli re: https://cli.netlify.com/functions-dev/#debugging-functions and run command line:

On Windows cmd /V /C "set NODE_OPTIONS=--inspect && netlify functions:serve" or on Mac\linux: NODE_OPTIONS=--inspect netlify functions:serve

You'll see Debugger listening on ws://127.0.0.1:9229/ and a list of your functions: ◈ Loaded function yourfunctionname

  1. Open any Chrome DevTools window and look for the green node logo to show up in the upper left and click it. A new DevTools window will open with title "DevTools - Node.js".

  2. Invoke your netlify function once (load the appropriate url in your browser i.e. http://localhost:9999/.netlify/functions/yourfunctionname)

  3. Back in Chrome DevTools, click the Sources tab and see it open on the left, click the Node tab there and see your source file under the file:// hierarchy.

  4. Create a breakpoint in Chrome Devtools and invoke your netlify function again and you should see the breakpoint hit.

My current configuration shown via command line netlify -v : netlify-cli/16.3.1 win32-x64 node-v18.17.1