How to setup VSCode to debug Firebase Functions?

Question

Pre-requisite: Firebase and node is setup correctly in the local machine

Requirements:

1. I only need to click the "Start Debugging (F5)" in VSCode once, then all other setup will be done automatically and I can start debugging.
2. When I change the code in editor during debugging, the change will be deployed and effective immediately
3. I can keep start and stop debugging session without worrying about process clean up because it's handled automatically after ending debugging session (Shift-F5)

Answer 1

You need only 2 files. Once they are in place, you can F5 to start debugging and Shift-F5 to stop debugging Firebase Functions.

1. {project_root}/.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Debug",
      "port": 9229,
      "restart": true,
      "skipFiles": ["<node_internals>/**"],
      "preLaunchTask": "start firebase emulator",
      "postDebugTask": "stop firebase emulator"
    }
  ]
}

2. {project_root}/.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "start firebase emulator",
      "type": "shell",
      "isBackground": true,
      // (1) This autocompiles if there is any code change and effective immediately.
      // (2) The single '&' ensures tsc -w (used in run build) will not block the emulator to start
      // (3) --inspect-function allows debugger to be attached
      "command": "npm --prefix ./functions run build -- -w & firebase emulators:start --inspect-functions",
      "presentation": { "reveal": "silent", "close": true },
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "line": 1,
              "column": 1,
              "message": 1
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": { "regexp": "." },
            "endsPattern": { "regexp": "." }
          }
        }
      ]
    },
    {
      "label": "stop firebase emulator",
      "command": "echo ${input:terminate}",
      "type": "shell"
    }
  ],
  "inputs": [
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "terminateAll"
    }
  ]
}