调试 Teams 应用

项目
10/28/2024

Microsoft Teams 工具包可帮助你调试和预览Microsoft Teams 应用。调试是检查、检测和更正问题或 bug 以确保程序在 Teams 中成功运行的过程。

针对Visual Studio Code调试 Teams 应用

Microsoft Visual Studio Code 中的 Teams 工具包自动执行调试过程。可以检测错误并修复错误，以及预览团队应用。还可以自定义调试设置以创建选项卡或机器人。

在调试过程中：

Teams 工具包会自动启动应用服务、启动调试器并上传 Teams 应用。
Teams 工具包在调试后台过程中检查先决条件。
调试后，Teams 应用可在 Teams Web 客户端本地预览。
还可以自定义调试设置，使用自动程序终结点、开发证书或调试部分组件来加载配置应用。
Visual Studio Code 可以调试选项卡、自动程序、邮件扩展和 Azure 函数。

Teams 工具包的主要调试功能

Teams 工具包支持以下调试功能：

开始调试
多目标调试
切换断点
热重新加载
停止调试
Teams 应用测试工具
在 Teams 桌面客户端中调试应用

Teams 工具包在调试过程中执行后台功能，包括验证调试所需的先决条件。可以在 Teams 工具包的输出通道中查看验证过程的进度。在设置过程中，可以注册和配置 Teams 应用。

开始调试

可以按 F5 作为单个操作来开始调试。 Teams 工具包开始检查先决条件、注册Microsoft Entra应用、Teams 应用和注册机器人、启动服务和启动浏览器。

多目标调试

Teams 工具包利用多目标调试功能同时调试选项卡、自动程序、邮件扩展和 Azure 函数。

切换断点

可以在选项卡、自动程序、邮件扩展和 Azure 函数的源代码上切换断点。在 Web 浏览器中与 Teams 应用交互时，将执行断点。下图显示了切换断点：

热重新加载

调试 Teams 应用时，可以同时更新和保存选项卡、机器人、消息扩展和Azure Functions的源代码。应用会重新加载，调试器会重新附加到编程语言。

停止调试

完成本地调试后，可以选择“ 停止 (Shift+F5) 或 [Alt] 断开 (Shift+F5) ，以停止所有调试会话并终止任务。下图显示了停止调试操作：

屏幕截图显示了“停止调试”选项。

Teams 应用测试工具

Teams 应用测试工具使调试基于机器人的应用变得轻松。你可以与机器人聊天，并在 Teams 中查看其消息和自适应卡片。无需Microsoft 365 开发人员帐户、隧道或 Teams 应用和机器人注册即可使用测试工具。有关详细信息，请参阅 Teams 应用测试工具。

在 Teams 桌面客户端中调试应用

Microsoft Teams 工具包可帮助你在桌面客户端中调试和预览 Microsoft Teams 应用。有关详细信息，请参阅在 Teams 桌面客户端中调试应用。

准备调试

以下步骤可帮助你准备调试：

如果已注册 Microsoft 365，请登录到 Microsoft 365。有关详细信息，请参阅 Microsoft 365 开发人员计划。

切换断点

确保可以在选项卡、机器人、消息扩展和Azure Functions的源代码上切换断点。有关详细信息，请参阅切换断点。

自定义调试设置

Teams 工具包允许自定义调试设置以创建选项卡或机器人。有关可自定义选项的完整列表的详细信息，请参阅调试设置文档。

还可以自定义现有机器人应用的调试设置。

了解如何使用现有机器人进行调试

默认情况下botAadApp/create，Teams 工具包使用操作为具有机器人的项目创建Microsoft Entra应用。

若要使用现有机器人，可以使用自己的值设置 BOT_ID 和 SECRET_BOT_PASSWORD 。env/.env.local

使用以下代码片段示例设置用于调试的现有机器人：

# env/.env.local

# Built-in environment variables
TEAMSFX_ENV=local

# Generated during provision, you can also add your own variables.
BOT_ID={YOUR_OWN_BOT_ID}
...

SECRET_BOT_PASSWORD={YOUR_OWN_BOT_PASSWORD}
...

自定义方案

下面是可以使用的调试方案列表：

跳过先决条件检查

在 .vscode/tasks.json 下的 "Validate prerequisites">>"args""prerequisites"中，更新要跳过的先决条件检查。

屏幕截图显示跳过先决条件检查。

使用开发证书

在中teamsapp.local.yml，devCert如果操作仅包含 devCert) ，请从devTool/install操作中删除 (或删除整个devTool/install操作。

在 teamsapp.local.yml中，将和 "SSL_KEY_FILE" 操作file/createOrUpdateEnvironmentFile设置为"SSL_CRT_FILE"证书文件路径和密钥文件路径。

# teamsapp.local.yml
...
  # Remove devCert or this whole action
  - uses: devTool/install
    with:
      # devCert:
  ...
  - uses: file/createOrUpdateEnvironmentFile
    with:
      target: ./.localSettings
      envs:
        ...
        # set your own cert values
        SSL_CRT_FILE: ...
        SSL_KEY_FILE: ...
...

自定义 npm install 命令

在中teamsapp.local.yml，编辑cli/runNpmCommandargs操作。

# teamsapp.local.yml
...
  - uses: cli/runNpmCommand
    with:
      # edit the npm command args
      args: install --no-audit
...

修改端口

Bot
1. 在整个项目中搜索"3978"，并在和 index.js中tasks.json查找外观。
2. 将其替换为端口。
Tab
1. 在整个项目中搜索"53000"，并在和 tasks.json中teamsapp.local.yml查找外观。
2. 将其替换为端口。

使用自己的应用包

默认情况下，Teams 工具包会创建一组 teamsApp 用于管理应用包的操作。可以更新中的 teamsapp.local.yml 应用，以使用自己的应用包。

# teamsapp.local.yml
...
  - uses: teamsApp/create # Creates a Teams app
    ...
  - uses: teamsApp/validateManifest # Validate using manifest schema
    ...
  - uses: teamsApp/zipAppPackage # Build Teams app package with latest env value
    ...
  - uses: teamsApp/validateAppPackage # Validate app package using validation rules
    ...
  - uses: teamsApp/update # Apply the app manifest (previously called Teams app manifest) to an existing Teams app in Teams Developer Portal.
    ...
...

使用自己的隧道

在 .vscode/tasks.json 下 "Start Teams App Locally"，可以更新 "Start Local tunnel"。

屏幕截图显示了使用自己的隧道的任务。

# env/.env.local

# Built-in environment variables
TEAMSFX_ENV=local
...
BOT_DOMAIN={YOUR_OWN_TUNNEL_DOMAIN}
BOT_ENDPOINT={YOUR_OWN_TUNNEL_URL}
...

# env/.env.local

# Built-in environment variables
TEAMSFX_ENV=local
...
BOT_DOMAIN={YOUR_OWN_TUNNEL_DOMAIN}
BOT_ENDPOINT={YOUR_OWN_TUNNEL_URL}
...

添加环境变量

你可以将环境变量添加到选项卡、自动程序、邮件扩展和 Azure 函数的 .localConfigs 文件。 Teams 工具包加载添加的环境变量，以在本地调试期间启动服务。

注意

确保添加新环境变量后启动新的本地调试，因为环境变量不支持热重载。

调试部分组件

Teams 工具包利用 Visual Studio Code 多目标调试功能，同时调试选项卡、自动程序、邮件扩展和 Azure 函数。可以更新 .vscode/launch.json 和 .vscode/tasks.json 来调试部分组件。如果只想在 Azure 函数项目中调试选项卡和自动程序，请使用以下步骤：

从中的调试复合中.vscode/launch.json更新 "Attach to Bot" 和 "Attach to Backend" 。

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

}

在 .vscode/tasks.json 中更新 "Start Backend" 和 "Start Bot" 从“全部启动”任务。

{

    "label": "Start application",
    "dependsOn": [
        "Start Frontend",
          // "Start Backend",
          // "Start Bot"

      ]

}

在本地调试应用

通过

调试 Teams 应用

针对Visual Studio Code调试 Teams 应用

Teams 工具包的主要调试功能

开始调试

多目标调试

切换断点

热重新加载

停止调试

Teams 应用测试工具

在 Teams 桌面客户端中调试应用

准备调试

切换断点

自定义调试设置

自定义方案

Next

另请参阅

其他资源

通过

调试 Teams 应用

针对Visual Studio Code调试 Teams 应用

Teams 工具包的主要调试功能

开始调试

多目标调试

切换断点

热重新加载

停止调试

Teams 应用测试工具

在 Teams 桌面客户端中调试应用

准备调试

登录 Microsoft 365

切换断点

自定义调试设置

自定义方案

Next

另请参阅

其他资源