Debugging Teams Toolkit backend api

Question

I created a new 'Tab' app using the teams toolkit. the scaffolded code includes an azure function that is running locally. When I Debug the code using the Debug in Teams (Edge) option, everything runs fine and the scaffolded azure function gets called , but ant breakpoint i set on the azure function code are not hit.

How do I debug both the frontend Teams code and the azure function, at the same time, locally?

Answer 1

The scaffolded code is not configured VSCode debugger for Azure Functions by default.

You may try attach to the debugging process from VSCode by updating your launch.json.

1. Add the configuration.

    {
      "name": "Attach to Backend",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true,
      "presentation": {
        "group": "all",
        "hidden": true
      },
      "internalConsoleOptions": "neverOpen"
    }

2. Add the configuration to your compounds

 "compounds": [
    {
      "name": "Debug in Teams (Edge)",
      "configurations": ["Attach to Frontend in Teams (Edge)", "Attach to Backend"],
      "preLaunchTask": "Start Teams App Locally",
      "presentation": {
        "group": "group 1: Teams",
        "order": 1
      },
      "stopAll": true
    },
    ...
  ]

3. Update existing configuration to cascade terminal signal so the debug process is closed when you stop debugging.

    {
      "name": "Attach to Frontend in Teams (Edge)",
      "type": "msedge",
      "request": "launch",
      "url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
      "cascadeTerminateToConfigurations": ["Attach to Backend"],
      "presentation": {
        "group": "all",
        "hidden": true
      },
      "internalConsoleOptions": "neverOpen"
    },

You can find a complete sample here: https://github.com/OfficeDev/TeamsFx-Samples/blob/dev/hello-world-tab-with-backend/.vscode/launch.json