Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Any way to debug functions? #409

Closed
fineline opened this issue Jul 16, 2019 · 37 comments · Fixed by #2270
Closed

Any way to debug functions? #409

fineline opened this issue Jul 16, 2019 · 37 comments · Fixed by #2270
Assignees
Labels
area: docs area: dx area: functions needs docs type: feature code contributing to the implementation of a feature and/or user facing functionality

Comments

@fineline
Copy link

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.

@sw-yx
Copy link
Contributor

sw-yx commented Jul 16, 2019

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

@RaeesBhatti RaeesBhatti transferred this issue from netlify/netlify-dev-plugin Aug 12, 2019
@modermo
Copy link

modermo commented Oct 8, 2019

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.

@sw-yx
Copy link
Contributor

sw-yx commented Oct 8, 2019

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
Copy link

8eecf0d2 commented Oct 8, 2019

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
Copy link

sudall commented Oct 8, 2019

@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
Copy link

sudall commented Oct 8, 2019

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
Copy link

sudall commented Oct 8, 2019

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

@sudall
Copy link

sudall commented Oct 8, 2019

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
Copy link

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

@abetoots
Copy link

Any updates on this?

@peter-wd-1
Copy link
Contributor

peter-wd-1 commented Jul 8, 2020

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
Copy link

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
Copy link

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

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

@Bulletninja
Copy link

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

@erezrokah erezrokah added type: feature code contributing to the implementation of a feature and/or user facing functionality area: docs area: dx and removed dev labels Jul 30, 2020
@erezrokah erezrokah self-assigned this Jul 30, 2020
@KyleMit
Copy link

KyleMit commented Sep 9, 2020

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:

@tysonmatanich
Copy link

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
Copy link

luismt commented Apr 30, 2021

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
Copy link
Contributor

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
Copy link
Contributor

MentalGear commented May 18, 2021

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

MentalGear commented May 18, 2021

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
Copy link
Contributor

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

@erezrokah
Copy link
Contributor

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

See PR MentalGear/netlify-dev_debug_vs-code#1

@kgpingle
Copy link

kgpingle commented May 19, 2021

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
Copy link
Contributor

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
Copy link
Contributor

MentalGear commented May 20, 2021

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
Copy link

kgpingle commented Jun 3, 2021

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
Copy link

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
Copy link
Member

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
Copy link
Contributor

Thanks for merging @eduardoboucas

@kgpingle
Copy link

@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
Copy link

ShaCP commented Oct 2, 2021

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
Copy link

ShaCP commented Oct 2, 2021

@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
Copy link

jimmend commented Jan 20, 2022

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: docs area: dx area: functions needs docs type: feature code contributing to the implementation of a feature and/or user facing functionality
Projects
None yet
Development

Successfully merging a pull request may close this issue.