移动设备调试

构建包含选项卡、机器人或消息扩展的 Microsoft Teams 应用时，必须调试应用，以了解应用在 Android 和 iOS Microsoft Teams 移动客户端上的运行方式。 有关详细信息，请参阅 在本地调试 Teams 应用。

观看以下视频，了解如何在移动客户端中调试 Teams 应用：

调试选项卡应用

若要调试选项卡应用，请执行以下步骤：

Visual Studio Code

可以在 Microsoft Visual Studio Code的“资源管理器”下查看项目文件夹和文件。

1. 在 task.json 文件中添加 Start local tunnel 后Validate prerequisites，使选项卡应用在移动客户端上可访问。

2. 在 文件中的 task.json 属性dependsOrder后面添加以下代码。

   {
     "version": "2.0.0",
     "tasks": [
       {
         "label": "Start Teams App Locally",
         "dependsOn": [
           "Validate prerequisites",
           "Start local tunnel", // Add this line
           "Provision",
           "Deploy",
           "Start application"
         ],
         "dependsOrder": "sequence"
       },
       {
         // Add this task
         "label": "Start local tunnel",
         "type": "teamsfx",
         "command": "debug-start-local-tunnel",
         "args": {
           "type": "dev-tunnel",
           "ports": [
             {
               "portNumber": 53000,
               "protocol": "https",
               "access": "private",
               "writeToEnvironmentFile": {
                 "endpoint": "TAB_ENDPOINT",
                 "domain": "TAB_DOMAIN"
               }
             }
           ],
           "env": "local"
         },
         "isBackground": true,
         "problemMatcher": "$teamsfx-local-tunnel-watch"
       }
     ]
   }
   

   注意

   • 若要仅在移动客户端中预览选项卡应用，请将 属性的值 access 设置为 private。
   • 当开发隧道访问值设置为 private时，选项卡应用不能显示在 Web 客户端上的 iframe 中。 登录页托管在 login.microsoftonline.com 上，其 X-FRAME-Options 标头设置为 DENY。
   • 若要在移动客户端上预览选项卡应用并在 Web 客户端上调试它，请将访问值设置为 public。 具有应用 URL 的任何用户可以访问选项卡。

3. 从teamsapp.local.yml文件中删除 TAB_DOMAIN 和 TAB_ENDPOINT 。

   - uses: script 
     with:
       run:
         echo "::set-teamsfx-env TAB_DOMAIN=localhost:53000";
         echo "::set-teamsfx-env TAB_ENDPOINT=https://localhost:53000";
   

4. 如果使用 React，请在文件中添加配置WDS_SOCKET_PORT=0teamsapp.local.yml，以在使用隧道服务后在 React 中调试时激活热重载。

     - uses: file/createOrUpdateEnvironmentFile
       with:
         target: ./.localConfigs
         envs:
           BROWSER: none
           HTTPS: true
           PORT: 53000
           SSL_CRT_FILE: ${{SSL_CRT_FILE}}
           SSL_KEY_FILE: ${{SSL_KEY_FILE}}
           REACT_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}} 
           REACT_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html 
           WDS_SOCKET_PORT: 0 
   

5. 运行已部署的应用

   1. (Ctrl+Shift+D 打开调试面板，或从Visual Studio Code查看>运行) 。
   2. 从启动配置下拉列表 中选择“在 Teams (Edge) 中启动远程”。
   3. 选择“开始调试 (F5) ”按钮。

   

   4. 系统会提示将自定义应用上传到 Teams。 选择“添加”。

      

      应用将作为个人选项卡打开。

      

命令行

1. 转到 ngrok 并注册免费帐户或登录到现有帐户。

2. 登录后，从左窗格中选择“ 你的 Authtoken”。

3. 复制 Authtoken 的值。

4. 运行 ngrok.exe 文件。

5. 运行 命令 ngrok http https://localhost:53000 --authtoken=<your-personal-ngrok-authtoken> 以启动本地隧道服务。

6. 在 文件中env/.env.local，更新 和 TAB_ENDPOINT的值TAB_DOMAIN。

    TAB_DOMAIN=sample-ngrok-id.ngrok.io 
    TAB_ENDPOINT=https://sample-ngrok-id.ngrok.io
   

7. 在项目目录中运行以下命令：

   1. teamsfx provision --env local
   2. teamsfx deploy --env local
   3. teamsfx preview --env local

在移动客户端上测试选项卡应用

1. 若要查找预览应用，请在移动设备上打开 Teams，然后选择“ 更多”。

   

   注意

   如果之前调试过应用，建议清除移动设备上的缓存，以确保立即进行应用同步。 清除缓存后，应用需要一些时间进行同步。

iOS

若要清除 Teams 应用数据，请转到 “设置>”“Teams>清除应用数据”。

Android

若要清除 Teams 应用数据，请转到 Teams>设置>数据和存储>清除应用数据>清除数据。

1. 如果是首次访问开发隧道，请登录到 Microsoft 365 帐户，然后选择“ 继续”。

   

   注意

   每个设备只需登录一次，每次安装应用时，都需要确认防钓鱼页面。

2. 创建第一个移动选项卡应用。

   

3. 对于 Android 设备，请在选项卡运行时使用 DevTools 调试选项卡。

在移动客户端上测试机器人应用

1. 若要在移动客户端中测试机器人，请遵循在机器人 的移动客户端上测试选项卡应用 中列出的步骤。

   注意

   如果之前调试了机器人应用，并且应用清单 (以前称为 Teams 应用清单) 文件发生更改，我们建议清除移动设备上的缓存，以确保立即实现应用同步。 清除缓存后，应用需要一些时间进行同步。

iOS

若要清除 Teams 应用数据，请转到 “设置>”“Teams>清除应用数据”。

Android

若要清除 Teams 应用数据，请转到 Teams>设置>数据和存储>清除应用数据>清除数据。

1. 创建第一个移动机器人应用。