Unable to Debug Netlify Edge Functions Locally

Support
,
1

Hello,

I’m reaching out to seek assistance with debugging Netlify edge functions locally. I have followed the documentation and various online resources, but unfortunately, I’m unable to get debugging working.

Problem:

Despite configuring the launch.json file and using the recommended flags, the debugger doesn’t seem to connect successfully when using the netlify dev command.

No breakpoints are hit and VS Code seems to know this because it’s showing an error message saying “Some of your breakpoints could not be set. If you’re having an issue, you can troubleshoot your launch configuration”.

Steps Taken:

  1. Verified node is up-to-date (version 21.4.0)
  2. Created a launch.json file in the .vscode folder with the configured suggested here (the one named “netlify dev” - but I also tried the “netlify functions:serve” one )
  3. Used the --edge-inspect=127.0.0.1:9229 flag with netlify dev suggested here
  4. Verified netlify-cli is globally installed and up-to-date (version 17.15.1)
  5. Attempted running netlify dev --edge-inspect=127.0.0.1:9229 via a separate terminal process or the launch command in launch.json

More info:

After fiddling around for an hour or so, I turned to ChatGPT and now my current launch.json configuration looks like this:

{
      "type": "node",
      "request": "launch",
      "name": "Debug Edge Functions",
      "runtimeExecutable": "/Users/chris/.nvm/versions/node/v21.4.0/lib/node_modules/netlify-cli/bin/run.js", // I have Netlify installed globally and I use nvm
      "runtimeArgs": ["dev", "--edge-inspect=127.0.0.1:9229"],
      "port": 9229,
      "restart": true,
      "protocol": "inspector",
      "timeout": 30000
    },

This successfully runs the dev server and tells me my edge function is loaded but none of my breakpoints are being hit.

This is the loaded edge function that is running on every path.

export default async (_request, context) => {
  console.log(context); // This also doesn't log anything to my terminal or debugger console.

  // Get the response.
  const response = await context.next();

  // Get the page.
  const page = await response.text();

  // Return true for now (just testing).
  if (true) {
    response.headers.set("cache-control", "public, max-age=3600"); // Cache for 60 minutes.

    // Return the unauthenticated page.
    return new Response(page.replace(/<authenticated>.*<\/authenticated>/, ""), response);
  } else {
    response.headers.set("cache-control", "private, max-age=3600"); // Cache for 60 minutes.

    // Return the authenticated page.
    return new Response(page.replace(/<unauthenticated>.*<\/unauthenticated>/, ""), response);
  }
};

export const config = {
  path: "/*",
};

This edge function above is definitely being run because when I insert new Response("Test") at the top of the function, “Test” shows as a blank page in my browser when I reload the page.

As an aside, the console.log(context) line at the top of the function does not log anything to my terminal or debugger console. I have raised a separate issue for that here.

Please can you help me set up my launch.json configuration so that I can debug my Edge functions with VSCode? Thank you for your time.

2

Does adding a debugger statement somewhere in your code help?

3

Thanks for the response. Just tried this but unfortunately no, problem persists. Doesn’t hit debugger even with a debugger statement right at the top of the edge function.

Can I provide you with any more info?

4

Based on your other report, I believe you might be right and have raised this with the devs along with that issue as well.

5

https://linear.app/netlify/issue/CT-506/

6

Thanks hrishikesh! I think this might be able to eventually work now that I’ve downgraded to Netlify CLI version 17.13.0.

However, the launch configuration (“netlify dev”) suggested by Netlify’s documentation here still does not work for me.

Any ideas on how to make the launch configuration work so I can debug my Edge function within VS Code? Here it is:

{
     "name": "netlify dev",
     "type": "node",
     "request": "launch",
     "skipFiles": ["<node_internals>/**"],
     "outFiles": ["${workspaceFolder}/.netlify/functions-serve/**/*.js"],
     "program": "/Users/chris/.nvm/versions/node/v21.4.0/lib/node_modules/netlify-cli/bin/run.js", // I have the CLI globally installed.
     "args": ["dev"], // I've also tried this with '--edge-inspect=127.0.0.1:9229' or simply '--edge-inspect'.
     "console": "integratedTerminal",
     "env": { "BROWSER": "none" },
     "serverReadyAction": {
       "pattern": "Server now ready on (https?://[\\w:.-]+)",
       "uriFormat": "%s",
       "action": "debugWithChrome"
     }
 },

Thank you very much for your time,
Chris

7

As mentioned, this has been passed to the devs and would let you know once we hear back from them.

8

Ok thank you, I’ll await the response

9

Hey there. In case you find it helpful, here is a paste of my notes on how I debug/set breakpoints in chrome devtools (instead of vscode) for edge functions:

  1. terminal> netlify dev --edge-inspect
  2. open any chrome dev tools, see node green logo in upper left, click on it
  3. should be able to see the sources of the edge functions and set breakpoints there in devtools
  4. run the edge function and see the breakpoint get hit, edit edge function in vscode, save it and see it get refreshed in chrome devtools
  5. Note: if function runs more than once (as seen in breakpoints hit more than once), then go backwards and remove any funky async until it doesn’t hit twice
1 Like
10

Thank you @blalond! I wish it were possible to debug with VS Code (maybe it is but I haven’t figured it out yet), but this is still useful.

11

Hi @catholica! First of all, apologies for the slow reply.

To run the VS Code debugger with edge functions, I recommend the following:

  1. Create a launch.json with the settings below

    {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Netlify Edge Functions",
      "type": "node",
      "request": "attach",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229
    }
  ]
}

  2. Start Netlify Dev with edge functions breakpoints enabled

    netlify dev --edge-inspect-brk

    You should see a message like:

    Debugger listening on ws://127.0.0.1:9229/ws/xxxxx-xxxxx
Visit chrome://inspect to connect to the debugger.
Deno is waiting for debugger to connect.

  3. Go the “Run and Debug” menu in VS Code and click on the green Play button next to Debug Netlify Edge Functions

  4. You should see a message saying Debugger session started.

  5. The debugger will now stop on any breakpoints

So what’s happening here? By using the --edge-inspect-brk (or --edge-inspect, if you don’t want the application to wait for the debugger) you’re telling the underlying edge functions server to run the debugger on the default port (9229) (you can specify a different port with `–edge-inspect-brk=0.0.0.0:1234 if you want).

Then the launch.json configuration with the "request": "attach" (as opposed to "launch") is telling VS Code to connect to the debugger on that port.

Let me know if this works for you. I’ll make sure we improve our documentation around this.

Thanks!

1 Like