Firebase Functions に VSCode でブレークポイントを設置したい

こちらの記事で解説しているfunctions-emulatorは既に Deprecated になっており困ってしまったので覚書を残しておきます。

デバッグツール

• Visual Studio Code
• firebase-tools

tsconfig.jsonの作成

TypeScriptで開発している場合は、tsconfig.jsonのsourceMapをtrueにしておきます。

{
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es6"
  },
  "compileOnSave": true,
  "include": [
    "src"
  ]
}

launch.jsonの作成

.vscode/launch.jsonを作成します。ポイントはoutFilesの箇所で、これを書くとマップファイルを読み込んで、TypeScript上に直接ブレークポイントを設置できます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Functions",
      "type": "node",
      "request": "attach",
      "processId": "${command:PickProcess}",
      "outFiles": ["${workspaceRoot}/functions/lib/**/*.js"]
    }
  ]
}

ローカルエミュレータを起動

私はできるだけグローバルインストールしたくない派なので、npxを使って起動します。ポイントは--inspect-functionsで、このオプションをつけて起動しないと、ブレークポイントを設置しても止まってくれません。

npx firebase emulators:start --inspect-functions --only functions

VSCode のデバッガを起動

VSCodeで F5 を打つとアタッチ先のプロセスを訊いてくるので、エミュレータのプロセスを選択します。コンソールに Debugger attached. と表示されたら、ブレークポイントで止めることができるようになります。

以上