0

How can I debug Amplify JavaScript functions on VS Code on Windows 10?

This issue came up on github under How to debug amplify function using visual studio code during invocation?, but it's closed and quite old. For example, amplify invoke function is deprecated in favor of amplify mock function.

I've tried this launch.config:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Create Reort",
      "type": "node",
      "request": "launch",
      "program": "${env:APPDATA}/npm/node_modules/@aws-amplify/cli/bin/amplify",
      "args": [
        "mock",
        "function",
        "sayhello",
        "--event",
        "src/event.json",
        "--timeout",
        "0"
      ],
      "console": "integratedTerminal"
    }
  ]
}

Which will log the output, but doesn't hit any breakpoints inside the function being executed:

Example Output

Setup steps:

  1. Install amplify cli

    npm install -g @aws-amplify/cli

  2. Initialize amplify. Choose JavaScript with any framework.

    amplify init
# Choose your default editor:                   Visual Studio Code
# Choose the type of app that you're building:  javascript  
# What javascript framework are you using:      none

  3. Add function

    amplify add function SayHello
# Choose the runtime that you want to use:            NodeJS
# Choose the function template that you want to use:  Hello World
KyleMit
  • 30,350
  • 66
  • 462
  • 664

3 Answers3

2

Here's a kinda hacky workaround.

As far as I can tell there isn't that much magic to lambdas for a single execution (The special sauce in the runtime environment, event handling, and auto scalability). The Amplify CLI passes in the event object from event.json and calls the function defined as the handler. You can do that in vanilla node js as well.

Create a file like debug.js - you can put it anywhere you want, but mine is in the .vscode directory

const { handler } = require("../amplify/backend/function/sayHello/src")
const event = require("../amplify/backend/function/sayHello/src/event.json")

(async function(){

    // invoke
    const response = await handler(event)

    console.log(response)
})()

Then you can use a normal node js debug launch configuration like this:

{
  "name": "Debug Function",
  "program": "${workspaceFolder}/.vscode/debug.js",
  "request": "launch",
  "skipFiles": ["<node_internals>/**"],
  "type": "pwa-node"
}

Something a little friendlier / out-of-the-box would be nice, but this at least allows step through debugging without too much extra work.

KyleMit
  • 30,350
  • 66
  • 462
  • 664
  • This is one of the best workaround solution. Thanks @KyleMit. – Waleed Ahmad Mar 18 '22 at 12:25
  • Since most of lambda handlers you'd see are async, It's better if your debug.js looks like this: `(async function(){ const { handler } = require("../amplify/backend/function/testLambda/src") const event = require("../amplify/backend/function/testLambda/src/event.json") // invoke const response = await handler(event) console.log(response) })();` otherwise, you'll end up with pending promises. – Waleed Ahmad Mar 18 '22 at 12:26
  • Thanks @WaleedAhmad, good point. Updated the post – KyleMit Mar 18 '22 at 12:44
1

This used to work in an older version of VS Code. I opened https://github.com/aws-amplify/amplify-cli/issues/6894 to hopefully address the issue.

Meanwhile, here's another hacky workaround suggested here that uses Node's injector. Add this code to the top of your handler method (making sure you remove it before committing):

require('inspector').open(9229, '127.0.0.1', true);
debugger;

Be sure to set a long enough timeout in the amplify mock command in launch.json. To step through the code, you can use Chrome's Node debugger by navigating to about:inspect and clicking on "Open dedicated DevTools for Node".

Caleb
  • 141
  • 1
  • 6
0

After few years of non debugable amplify cli, I just came with 100% working way to debug inline amplify with VS Code, which I explained into a bit more detail on this git issue. Hope it helps others who are looking for the same

fakedob
  • 145
  • 3
  • Thanks @fakedob - totally fine to link to an external issue, but would you mind inlining some of the key steps here as well? – KyleMit Apr 19 '23 at 19:44
  • Sure, the solution is basically to recompile the amplify cli from source and change the way the mock function spawns the child process within which it executes the custom resolver. Looking deep into their framework, it is not possible to use props to reconfigure the cli somehow, thus, recompiling the cli. From there, you can instruct VS Code to listen and attach to a process on the port you specify, when spawning new node processes from within the amplify cli. Steps to reproduce my solution are in the link. – fakedob Apr 19 '23 at 19:52
  • Thanks so much - do you mind also just editting that into the answer for posterity? – KyleMit Apr 19 '23 at 20:52