Should Create JavasScript Debug Terminal work for the serverless framework?

[jschuur]

I'm using the Serverless Framework to invoke local functions during testing via an NPM script and am not sure if this is supposed to work out of the box like normal node processes.

From my NPM scripts (full code at the repo):

    "update:channels": "serverless invoke local -f update_channels"

Using version 2020.5.2917, either if I click on the Debug menu above my list of NPM scripts to run this one or if I launch Debug: Create JavaScript Debug Terminal and just run npm run update:channels, it doesn't seem to attach itself to the process or hit my breakpoint:

npm run update:channels
Debugger listening on ws://127.0.0.1:61147/b7ea0a6c-9bff-445b-958b-56ac4a54a8d6
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Waiting for the debugger to disconnect...
Debugger listening on ws://127.0.0.1:61154/13f65e37-f671-4521-bd06-9b9608478993
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Waiting for the debugger to disconnect...
➜  learnchinese.club git:(master) npm run update:channels                                                                                          11:09
Debugger listening on ws://127.0.0.1:61160/8be1b853-6946-42b6-8125-282384c3ca47
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

> learnchinese.club@0.0.6 update:channels /Users/jschuur/Code/learnchinese.club
> serverless invoke local -f update_channels

Debugger listening on ws://127.0.0.1:61166/86101e42-9b52-4b7e-9f49-5e82dfe48019
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

...serverless-webpack compile process and function execution output omitted...

Waiting for the debugger to disconnect...
Waiting for the debugger to disconnect...

The function just runs as if there was no breakpoint assigned.

Should it just work out of the box like this? I did notice it was listening on three different ports. Serverless also goes and compiles it via webpack first before it runs it.

On the other hand, if I launch it via this configuration in .vscode/launch.json it works:

{
      "name": "Update Channels",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/sls",
      "args": ["invoke", "local", "-f", "update_channels"],
      "autoAttachChildProcesses": true
 }

I have a number of NPM scripts that I might like to run from the Debug menu straight in the NPM script list rather than give them all entries in launch.json. Would this be possible given my setup?

[connor4312]

Thanks for the issue.

It looks like Serverless' process makes our life difficult here. To set breakpoints, we need to read and understand any sourcemaps that are present. In Chrome, we can ask the runtime to pause before executing scripts that have an associated sourcemap so that we have the opportunity to set breakpoints. Node.js doesn't have this mechanism, so we need to do it before the process starts by scanning the filesystem for sourcemaps (by default, the we scan the entire workspace excluding node_modules, configurable in the outFiles) and only running the program once the scan completes.

However, it looks like serverless only build the functions when the serverless command is invoked, so the sourcemaps don't exist at this point. We do watch for sourcemaps coming in at runtime, but it's just a race whether we can parse and set a breakpoint at any given location before it's executed. I'm guessing that, for you, the timing in the debug terminal is just slightly different so that the breakpoint is usually missed.

--

To fixed this I introduced a new option to allow you to ask js-debug to explicitly pause on certain files to allow to parsing sourcemaps, We can set these entrypoint breakpoints ahead of time, so there's no race. if any. In tomorrow's nightly, you can add the following option to your launch config and/or debug.javascript.terminalOptions which should work for your app:

"runtimeSourcemapPausePatterns": [
  "${workspaceFolder}/.webpack/**/*.js"
],