Any way to debug functions?

[fineline]

Not a bug or feature request but an enquiry:

What context do javascript lambda functions run in when using netlify dev? Is there any way to pass the --inspect flag so a debugger can be connected like a standard node app?

Thanks, and great work on netlify dev.

[swyxio]

this is interesting bc nobody’s asked for this before but it seems so natural. guess we’re all used to console.log debugging 😂

Raes is probably better at answering the —inspect flag but in general netlify dev is meant to make functions super easy to debug. its not much different from running a node server locally with env variables injected from your build settings. perhaps if you gave more insight into your problem we can suggest debugging steps

[modermo]

Not sure if this is what @fineline needs, but for me, being able to attach a local instance of the chrome debugger so that I can step through a lambda function is in orders of magnitude more helpful than just console.log() statements.

[swyxio]

what do we need to do on our end to make that happen? never done this before. i guess node doesnt just do this by default? 😂

[8eecf0d2]

I haven't looked at how netlify-cli works, but I'd assume the following will do the job:

node --inspect node_modules/.bin/netlify-cli dev

All that's really needed to make this work is to pass the --inspect flag to the node process which executes the actual function code (presumably the same node process as the netlify-cli command itself).

If the above works, all that @sw-yx and the team would really need to do is provide their own flag (eg, --node-flag-inspect) which would pass the --inspect flag to the node process which executes the functions - this would only serve to clean up the syntax.

[sudall]

@8eecf0d2 I tried node --inspect node_modules/netlify-cli/bin/run dev, but it doesn't seem to work. I think you might be right about the --inspect on the child lambda process that netlify dev is making.

Edit: Actually, I can see that Chrome debugger is able to attach to localhost:34567 (the lambda server) with node --inspect node_modules/netlify-cli/bin/run dev. I just need to figure out how to use it properly. I can't really see my source code. I use the webstorm IDE too, so ideally I'll get it working in there.

[sudall]

I have some more progress. I'm able to hit breakpoints in the built js files in Webstorm and Chrome Debugger. Note that the debugger has to point to port 9229 and not the port the lambdas are served from. https://nodejs.org/de/docs/guides/debugging-getting-started/.

I think the next step is to figure out how to generate source-maps with netlify-lambda so I can hit ts breakpoints.

[sudall]

npx --node-arg=--inspect netlify dev also appears to work

[sudall]

Okay I got it working with TypeScript. For anyone wondering:

    "build:lambda": "netlify-lambda build src/lambda --config ./webpack.config.dev.js",
    "dev": "npx --node-arg=--inspect netlify dev"

in the webpack.config.dev.js

module.exports = {
    devtool: 'inline-source-map',
    optimization: { minimize: false }
};

run dev script and attach a debugger to localhost:9229

[mcrowder65]

@sudall just doing node --inspect node_modules/.bin/netlify dev worked for me. Needed to do yarn add -D netlify-cli locally, however.

[abetoots]

Any updates on this?

[peter-wd-1]

Looks like node --inspect node_modules/.bin/netlify-cli dev is the best workaround at the moment. I feel using this command with chrome debugger attached(about://inspect) is fairly convenient and I'm personally using indium for code inspection. Note that you should not use netlify-lambda if you don't want extra settings. You can just create functions ntl functions:create fun-name and debug by executing node with --inspect. Looks like netlify handles the rest of hassle jobs. Wonder how that works though.

[8eecf0d2]

Just an update to this, today I discovered the NODE_OPTIONS environment variable which allows you to pass flags to the node binary and looks something like:

NODE_OPTIONS=--inspect netlify dev

I think this is a much nicer experience, so nice in fact that if this was added to the docs I think this issue could be closed.

[souljorje]

Worked for me in Nuxt.js project on Mac OS:

node --inspect-brk=9229 /usr/local/bin/netlify dev

[Bulletninja]

Just an update to this, today I discovered the NODE_OPTIONS environment variable which allows you to pass flags to the node binary and looks something like:

NODE_OPTIONS=--inspect netlify dev

I think this is a much nicer experience, so nice in fact that if this was added to the docs I think this issue could be closed.

That didn't work for me, it returned:

◈ Functions server is listening on 59515
Starting inspector on 127.0.0.1:9229 failed: address already in use
◈ "yarn start" exited with code 12. Shutting down Netlify Dev server

Even though no other node instance is running

[KyleMit]

You can do this in VS Code by adding a launch file. In order for VS Code to attach a debugger, the program that is executed must be relative to the local workspace, so first install netlify dev locally within your project as a dev dependency:

npm install netlify-cli --save-dev

Then you can add the following launch.json:

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

Other Threads:

• Netlify Dev functions - debugging and other issues
• Running netlify functions in a debugger
• Debug lambda functions locally #71
• Debugging help / using --inspect flag throws "error : unknown option" #148

[tysonmatanich]

I got it working in VS Code using 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>/**"]
    }
  ]
}

Using netlify-cli@2.65.6

[luismt]

I found this: https://daily.dev/blog/how-to-debug-netlify-serverless-lambda-functions-using-vs-code

Works perfect, I see similar answers on this one. Hope this helps

[erezrokah]

Hi all 👋

We have a work in progress PR for this in #2270.
Proposed instructions are here.

The advantage of the proposed approach is that you'll be debugging just the functions code (and functions server) instead of debugging the entire netlify dev process (which also starts the framework server).

[MentalGear]

The advantage of the proposed approach is that you'll be debugging just the functions code (and functions server) instead of debugging the entire netlify dev process (which also starts the framework server).

By entire netlify dev process, do you also mean the internal process or just the (framework) commands it starts?
For example, I use netlify dev to start yarn nuxt to have my static front end available along with the serverless backend.

For this full stack debug, I assume netlify dev --inspect is still recommended?

[erezrokah]

By entire netlify dev process, do you also mean the internal process or just the (framework) commands it starts?

netlify dev does both.

For this full stack debug, I assume netlify dev --inspect is still recommended?

Yes, and I believe it should be NODE_OPTIONS=--inspect netlify dev

[MentalGear]

By entire netlify dev process, do you also mean the internal process or just the (framework) commands it starts?

netlify dev does both.

Might there be another flag coming that ignores netlify dev's internal processes?

For this full stack debug, I assume netlify dev --inspect is still recommended?

Yes, and I believe it should be NODE_OPTIONS=--inspect netlify dev

Is it just semantics, or is there a technical difference as well?

Thanks for the reply, erez.

[erezrokah]

Might there be another flag coming that ignores netlify dev's internal processes?

With VSCode you can use https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_additional-configuration

Is it just semantics, or is there a technical difference as well?

I wasn't able to get netlify dev --inspect to work from a command line

[MentalGear]

Indeed only netlify dev --inspect even runs for me, the previous described approaches above don't.

However, it doesn't respect any breakpoints set in VS code.

Could you take a look? I set up a minimal reproducible repo (netlify dev/functions/nuxt/typegrapql) and I'm happy to provide it as an example guide once it can properly integrate.
https://github.com/MentalGear/netlify-dev_debug_vs-code

[MentalGear]

Trying to get this working for 2 days now ... really frustrating ...

[erezrokah]

Hi @MentalGear, for VSCode you can follow #409 (comment)

See PR MentalGear/netlify-dev_debug_vs-code#1

[kgpingle]

Hi @erezrokah I tried this comment for VS code.
It starts in Debug mode - but the request from chrome browser (http://localhost:8888) never reaches VSCode and If I stop the browser I see Socket hang message.

Also I tried #409 (comment) but I do not see node_modules/.bin/netlify but I have node_modules/.bin/netlify-lambda

I want this debug point in vs code - any help is appreciated.

[erezrokah]

Hi @kgpingle, have you installed the CLI locally by running npm install netlify-cli --save-dev as #409 (comment) suggests? You should have node_modules/.bin/netlify then.

[MentalGear]

Fullstack VS Code Debugging w/ netlify dev

For everyone struggling with this, here's my guide with a MWE repo on how to integrate fullstack VS Code Debugging with netlify dev. Thanks @erezrokah for your help on it !

Supports:

• serverless functions
• sourcemaps (no warnings)
• uncaught exceptions
• Examples for TS, graphQL and normal http requests.

https://github.com/MentalGear/netlify-dev_debug_vs-code

[kgpingle]

Thanks @erezrokah & @MentalGear - Sorry for late reply.
Yep, it went a step ahead but unable to set a breakpoint.
Any hints what should be the program in launch.json for yarn workspaces.

Because I see below o/p for FullStack Debug

Debugger attached.
◈ Netlify Dev ◈
◈ Ignored general context env var: LANG (defined in process)
◈ No app server detected and no "command" specified
◈ Using current working directory
◈ Unable to determine public folder to serve files from
◈ Setup a netlify.toml file with a [dev] section to specify your dev server settings.
◈ See docs at: https://cli.netlify.com/netlify-dev#project-detection
◈ Running static server from "src"

◈ Server listening to 3999

┌─────────────────────────────────────────────────┐
│ │
│ ◈ Server now ready on http://localhost:8888 │
│ │
└─────────────────────────────────────────────────┘

[Petermhen]

Thanks @erezrokah & @MentalGear - Sorry for late reply.
Yep, it went a step ahead but unable to set a breakpoint.
Any hints what should be the program in launch.json for yarn workspaces.

Because I see below o/p for FullStack Debug

Debugger attached.
◈ Netlify Dev ◈
◈ Ignored general context env var: LANG (defined in process)
◈ No app server detected and no "command" specified
◈ Using current working directory
◈ Unable to determine public folder to serve files from
◈ Setup a netlify.toml file with a [dev] section to specify your dev server settings.
◈ See docs at: https://cli.netlify.com/netlify-dev#project-detection
◈ Running static server from "src"
◈ Server listening to 3999
┌─────────────────────────────────────────────────┐
│ │
│ ◈ Server now ready on http://localhost:8888 │
│ │
└─────────────────────────────────────────────────┘

Same here, breakpoints not working for me.

[eduardoboucas]

For anyone still experiencing issues with debugging functions in VS Code, can you try to follow the steps in https://cli.netlify.com/vscode/? If that doesn't work, please add a comment here and we'll reopen the issue.

Thanks!

[MentalGear]

Thanks for merging @eduardoboucas

[kgpingle]

@eduardoboucas still struggling for yarn workspaces. I see below in console. However my server (toml file) is under
src/project/packages/client/

Debugger attached.
◈ Netlify Dev ◈
◈ Ignored general context env var: LANG (defined in process)
◈ No app server detected. Using simple static server
◈ Unable to determine public folder to serve files from. Using current working directory
◈ Setup a netlify.toml file with a [dev] section to specify your dev server settings.
◈ See docs at: https://cli.netlify.com/netlify-dev#project-detection
◈ Running static server from "src"

[ShaCP]

Has anyone successfully gotten breakpoints to work in vscode when using esbuild as the bundler? esbuild is creating the source map but breakpoints are not working for me. If I set the breakpoints on the transformed file, it works fine. But I want to be able to set them on the original file.

[ShaCP]

@eduardoboucas

For anyone still experiencing issues with debugging functions in VS Code, can you try to follow the steps in https://cli.netlify.com/vscode/? If that doesn't work, please add a comment here and we'll reopen the issue.

Thanks!

I tried that exact config and it did not work for me. I got this error:

Debugger attached.
Waiting for the debugger to disconnect...
F:\some\path\node_modules\.bin\netlify:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47

I had to go back to the config I used with netlify-lambda:

{
    "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/*", <--- this worked with netlify-lambda to step through original file, but doesn't work with esbuild, I have to step through transformed file.
            },
            "resolveSourceMapLocations": [
                "${workspaceFolder}/**",
                "!**/node_modules/**"
            ]
        }
    ]
}

I'm having the problem I mentioned in the above post though.

[jimmend]

For whoever else has this issue, the launch config in the Netlify documentation (https://cli.netlify.com/vscode/) mostly worked for me.

I just had to change:

node_modules/.bin/netlify

to:

node_modules/netlify-cli/bin/run

I suspect the issue is when you don't have netlify-cli installed globally (I only install locally per project).

Hope that helps!

[toreylittlefield]

If it's helpful to anyone I

For whoever else has this issue, the launch config in the Netlify documentation (https://cli.netlify.com/vscode/) mostly worked for me.

I just had to change:

node_modules/.bin/netlify

to:

node_modules/netlify-cli/bin/run

I suspect the issue is when you don't have netlify-cli installed globally (I only install locally per project).

Hope that helps!

Confirm this works for me. Thanks to this thread and everyone here.

Here's my launch.json for reference if that helps anyone.

launch.json config for netlify dev