How to setup VSCode to debug Firebase Functions? - firebase

Question

Pre-requisite: Firebase and node is setup correctly in the local machine
Requirements:
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.
When I change the code in editor during debugging, the change will be deployed and effective immediately
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.
{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"
}
]
}
{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"
}
]
}