通过

在本地调试 Teams 应用

  • 项目

Microsoft Teams 工具包可帮助你在本地调试和预览 Microsoft Teams 应用。 在调试过程中，Teams 工具包会自动启动应用服务、启动调试器并上传 Teams 应用。 调试后，可以在 Teams Web 客户端本地预览 Teams 应用。

在本地调试 Visual Studio Code 的 Teams 应用

Microsoft Visual Studio Code 中的 Teams 工具包提供了在本地自动调试 Teams 应用的功能。 Visual Studio Code 允许调试选项卡、机器人和消息扩展。 在调试应用之前，需要设置 Teams 工具包。

注意

旧 Teams 工具包项目升级为使用新任务，有关详细信息，请参阅 任务文档。

设置 Teams 工具包进行调试

以下步骤可帮助你在启动调试过程之前设置 Teams 工具包：

  1. 从“运行和调试”下拉列表中选择“在 Teams (Edge) 中调试”或“ 在 Teams (Chrome) 中调试 ”。

    屏幕截图显示了“浏览器”选项。

  2. 选择 “运行>启动调试” (F5) 。

    屏幕截图显示了“开始调试”选项。

  3. 选择“ 创建Microsoft 365 测试租户 ”以Microsoft 365 帐户。

    屏幕截图突出显示了“登录”选项。

    提示

    可以选择“ 创建Microsoft 365 测试租户 ”，了解Microsoft 365 开发人员计划。 默认 Web 浏览器随即打开，让你使用凭据登录到 Microsoft 365 帐户。

  4. 选择“安装”，以安装本地主机的开发证书。

    屏幕截图显示了要安装的证书。

    提示

    可以选择“了解”有关开发证书的详细。

  5. 在“安全警告”对话框中选择“是”。

    屏幕截图显示用于安装证书的证书颁发机构。

工具包会根据你的选择启动新的 Microsoft Edge 或 Chrome 浏览器实例，并打开一个网页来加载 Teams 客户端。

调试应用

完成初始设置过程后，Teams 工具包将启动以下过程：

启动应用服务

运行 中 .vscode/tasks.json定义的任务。 默认情况下，任务名称为 "Start application"。 如果项目包含多个组件，则会有更多依赖任务。

// .vscode/tasks.json
{
    "label": "Start application",
    "dependsOn": [
        "Start Frontend", // Tab
        "Start Backend", // Azure Functions
        "Start Bot" // Bot or message extensions
    ]
}

下图显示 Visual Studio Code 的 “输出 ”和“ 终端 ”选项卡中的任务名称，同时运行选项卡、机器人或消息扩展以及 Azure Functions。

显示“启动应用服务”的屏幕截图。

启动本地隧道

使用开发隧道作为本地隧道服务，使本地机器人消息终结点公开。

开发隧道

若要从 v4 项目手动迁移本地隧道任务，请更新 文件中的 .vscode/tasks.json 以下代码：

{
      "label": "Start local tunnel",
      "type": "teamsfx",
      "command": "debug-start-local-tunnel",
      "args": {
          "type": "dev-tunnel",
          "ports": [
              {
                  "portNumber": 3978,
                  "protocol": "http",
                  "access": "public",
                  "writeToEnvironmentFile": {
                      "endpoint": "BOT_ENDPOINT",
                      "domain": "BOT_DOMAIN"
                  }
              }
        ],
          "env": "local"
      },
      "isBackground": true,
      "problemMatcher": "$teamsfx-local-tunnel-watch"
    },

若要将另一个端口用于本地机器人服务，请更改 portNumber 文件中的 .vscode/tasks.json ，同时更改 portNumber 或 index.ts 文件中的 index.js 。

下表列出了所需的参数：

参数 类型 必需 说明
type string 必需 要使用的隧道服务类型。 此参数必须设置为 dev-tunnel。
env string 可选 环境名称。 Teams 工具包将中output.env.<env>定义的环境变量写入文件。
ports 数组 必需 端口配置数组，每个配置指定本地端口号、协议和访问控制设置。

参数 ports 必须是对象的数组，每个对象指定特定端口的配置。 每个对象必须包含以下字段：

端口 类型 必需 说明
portNumber number 必需 隧道的本地端口号。
protocol string 必需 隧道的协议。
access string 可选 隧道的访问控制设置。 此值可以设置为 private 或 public。 如果未指定，则默认值为 private。
writeToEnvironmentFile object 可选 写入文件的 .env 隧道终结点和隧道域环境变量的密钥。

对象 writeToEnvironmentFile 包含两个字段：

WriteToEnvironmentFile 类型 必需 说明
endpoint string 可选 隧道终结点环境变量的键。
domain string 可选 隧道域环境变量的键。

当包含 时 writeToEnvironmentFile ，指定的环境变量将写入 .env 文件。 省略字段时，不会将环境变量写入文件。

启动调试配置

启动中 .vscode/launch.json定义的调试配置。

屏幕截图显示启动调试器。

下表列出了具有选项卡、机器人或消息扩展应用以及 Azure Functions 的项目的调试配置名称和类型：

组件 调试配置名称 调试配置类型
Tab 附加到前端 (Edge) 或 附加到前端 (Chrome) msedge 或 chrome
自动程序或邮件扩展 连接到自动程序 节点
Azure Functions 连接到后端 节点

下表列出了使用机器人应用、Azure Functions 和不带选项卡应用的项目的调试配置名称和类型：

组件 调试配置名称 调试配置类型
自动程序或邮件扩展 启动机器人 (Edge) 或 启动机器人 (Chrome) msedge 或 chrome
自动程序或邮件扩展 连接到自动程序 节点
Azure Functions 连接到后端 节点

上传 Teams 应用

配置“附加到前端”或“启动应用”Microsoft Edge 或 Chrome 浏览器实例启动，以在网页中加载 Teams 客户端。 加载 Teams 客户端后，上传由启动配置Microsoft Teams 中定义的上传 URL 控制的 Teams 应用。 当 Teams 客户端在 Web 浏览器中加载时，选择“ 添加 ”或根据你的要求从下拉列表中选择一个选项。

屏幕截图显示“添加本地调试”。

你的应用已添加到 Teams！

后续步骤

调试后台进程

另请参阅