How to Debug Amplify JavaScript functions in VS Code

Question

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:

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
   

Answer 1

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.

Answer 2

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".