如何同时本地调试Teams Tab应用前端与Azure Functions代码？

检查调试配置 #

• 打开.vscode/launch.json，确认里面包含Azure Function的调试配置条目（根据你使用的语言调整，比如Node.js或Python），示例如下：

  {
      "name": "Attach to Azure Functions",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "preLaunchTask": "func: host start"
  }
  

• 同时确认Teams前端的Debug in Teams (Edge)配置和Function配置都存在，且端口无冲突。

分步骤启动调试会话 #

• 先在VS Code调试面板中选择Attach to Azure Functions（或对应配置名称），点击启动，等待Function服务运行起来，确认断点变为实心红色（激活状态）。
• 再启动Debug in Teams (Edge)调试会话，此时前端调用Function时，断点即可触发。

核对Function调试端口 #

• 查看Azure Function本地启动的控制台输出，找到它监听的调试端口（比如Node.js默认9229，Python默认9091）。
• 如果launch.json里的port字段和实际端口不一致，修改后重新启动调试。

确认断点位置正确 #

• 把断点设在Function的实际执行代码内，比如处理请求的函数逻辑段，不要设在空行、注释或未被执行的代码上。
• 如果用TypeScript编写Function，要确保已编译为JavaScript，且开启了source map，保证断点能正确映射到源文件。

配置复合调试（一键启动） #

• 在launch.json中添加复合配置，让VS Code同时启动两个调试会话：

  {
      "name": "Debug Teams + Functions",
      "type": "compound",
      "configurations": ["Debug in Teams (Edge)", "Attach to Azure Functions"]
  }
  

• 后续选择这个复合配置启动，就能同时调试前端和Function了。

内容的提问来源于stack exchange，提问作者RussGove