Compartir a través de

Depurar la aplicación de Teams

  • Artículo

Microsoft Teams Toolkit le ayuda a depurar y obtener una vista previa de la aplicación de Microsoft Teams. La depuración es el proceso de comprobar, detectar y corregir problemas o errores para garantizar que el programa se ejecuta correctamente en Teams.

Depuración de la aplicación de Teams para Visual Studio Code

Teams Toolkit en Microsoft Visual Studio Code automatiza el proceso de depuración. Puede detectar errores y corregirlos, así como obtener una vista previa de la aplicación teams. También puede personalizar la configuración de depuración para crear la pestaña o el bot.

Durante el proceso de depuración:

  • Teams Toolkit inicia automáticamente app services, inicia depuradores y carga la aplicación de Teams.
  • Teams Toolkit comprueba los requisitos previos durante el proceso en segundo plano de depuración.
  • La aplicación de Teams está disponible para la versión preliminar en el cliente web de Teams localmente después de la depuración.
  • También puede personalizar la configuración de depuración para usar los puntos de conexión del bot, el certificado de desarrollo o el componente parcial de depuración para cargar la aplicación configurada.
  • Visual Studio Code permite depurar pestañas, bots, extensiones de mensajes y Azure Functions.

Características clave de depuración del kit de herramientas de Teams

El kit de herramientas de Teams admite las siguientes características de depuración:

Teams Toolkit realiza funciones en segundo plano durante el proceso de depuración, que incluyen la comprobación de los requisitos previos necesarios para la depuración. Puede ver el progreso del proceso de verificación en el canal de salida del kit de herramientas de Teams. En el proceso de instalación, puede registrar y configurar la aplicación de Teams.

Iniciar depuración

Puede presionar F5 como una sola operación para iniciar la depuración. Teams Toolkit comienza a comprobar los requisitos previos, registra Microsoft Entra aplicación, la aplicación de Teams y registra el bot, inicia los servicios e inicia el explorador.

Depuración de varios destinos

El kit de herramientas de Teams usa la característica de depuración de varios destinos para depurar pestañas, bots, extensiones de mensajes y Azure Functions al mismo tiempo.

Alternar puntos de interrupción

Los puntos de interrupción en los códigos fuente de pestañas, bots, extensiones de mensajes y Azure Functions se pueden alternar. Los puntos de interrupción se ejecutan al interactuar con la aplicación Teams en un explorador web. En la imagen siguiente se muestra el punto de interrupción de alternancia:

Captura de pantalla que muestra los puntos de interrupción de alternancia.

Recarga activa

Puede actualizar y guardar los códigos de origen de tab, bot, extensión de mensaje y Azure Functions al mismo tiempo que depura la aplicación teams. La aplicación se vuelve a cargar y el depurador vuelve a conectarse a los lenguajes de programación.

Captura de pantalla que muestra la recarga activa de los códigos fuente.

Detener depuración

Cuando complete la depuración local, puede seleccionar Detener (Mayús+F5) o [Alt] Desconectar (Mayús+F5) en la barra de herramientas de depuración flotante para detener todas las sesiones de depuración y finalizar las tareas. En la imagen siguiente se muestra la acción de detención de depuración:

Captura de pantalla que muestra la opción Detener depuración.

Herramienta de prueba de aplicaciones de Teams

La herramienta de prueba de aplicaciones de Teams facilita la depuración de las aplicaciones basadas en bots. Puede chatear con el bot y ver sus mensajes y tarjetas adaptables a medida que aparecen en Teams. No necesita una cuenta de desarrollador de Microsoft 365, una tunelización o un registro de aplicaciones y bots de Teams para usar la herramienta de prueba. Para obtener más información, vea Herramienta de prueba de aplicaciones de Teams.

Depuración de aplicaciones en el cliente de escritorio de Teams

Microsoft Teams Toolkit le ayuda a depurar y obtener una vista previa de la aplicación de Microsoft Teams en el cliente de escritorio. Para obtener más información, vea Depurar aplicaciones en el cliente de escritorio de Teams.

Preparación para la depuración

Los pasos siguientes le ayudan a prepararse para la depuración:

Iniciar sesión en Microsoft 365

Si ya se ha registrado en Microsoft 365, inicie sesión en Microsoft 365. Para obtener más información, vea Programa para desarrolladores de Microsoft 365.

Alternar puntos de interrupción

Asegúrese de que puede alternar los puntos de interrupción en los códigos de origen de pestañas, bots, extensiones de mensaje y Azure Functions. Para obtener más información, vea Alternar puntos de interrupción.

Personalizar la configuración de depuración

Teams Toolkit le permite personalizar la configuración de depuración para crear la pestaña o el bot. Para obtener más información sobre la lista completa de opciones personalizables, consulte el documento de configuración de depuración.

También puede personalizar la configuración de depuración de la aplicación de bot existente.

Aprenda a usar un bot existente para la depuración.

Teams Toolkit crea aplicaciones Microsoft Entra para proyectos con bot de forma predeterminada mediante botAadApp/create la acción .

Para usar un bot existente, puede establecer y SECRET_BOT_PASSWORD en BOT_IDenv/.env.local con sus propios valores.

Use el siguiente ejemplo de fragmento de código para configurar un bot existente para la depuración:

# 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}
...

Personalizar escenarios

Esta es una lista de escenarios de depuración que puede usar:

Omitir comprobaciones de requisitos previos

> "prerequisites" "Validate prerequisites" "args" >En .vscode/tasks.json , actualice las comprobaciones de requisitos previos que desea omitir.

Captura de pantalla que muestra la omisión de comprobaciones de requisitos previos.

Uso del certificado de desarrollo

  1. En teamsapp.local.yml, quite devCert de devTool/install la acción (o quite toda devTool/install la acción si solo contiene devCert).

  2. En teamsapp.local.yml, establezca "SSL_CRT_FILE" y "SSL_KEY_FILE" en acción la file/createOrUpdateEnvironmentFile ruta de acceso del archivo de certificado y la ruta de acceso del archivo de clave.

    # 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: ...
...
Personalizar el comando npm install

En teamsapp.local.yml, edite args la cli/runNpmCommand acción.

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

  • Bot

    1. Busque "3978" en todo el proyecto y busque apariencias en tasks.json y index.js.

    2. Reemplácela por el puerto.

      Captura de pantalla que muestra el resultado de la búsqueda para reemplazar el puerto del bot.

  • Tab

    1. Busque "53000" en todo el proyecto y busque apariencias en teamsapp.local.yml y tasks.json.

    2. Reemplácela por el puerto.

      Captura de pantalla que muestra el resultado de la búsqueda para reemplazar el puerto de la pestaña.

Uso de su propio paquete de aplicación

El kit de herramientas de Teams crea de forma predeterminada un conjunto de acciones para administrar el paquete de teamsApp la aplicación. Puede actualizarlos en teamsapp.local.yml para usar su propio paquete de aplicación.

# 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.
    ...
...
Uso de su propio túnel

En .vscode/tasks.json , "Start Teams App Locally"puede actualizar "Start Local tunnel".

Captura de pantalla que muestra las tareas de uso de su propio túnel. 

# 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}
...
Adición de variables de entorno

Puede agregar variables de entorno al archivo .localConfigs para pestañas, bots, extensión de mensajes y Azure Functions. Teams Toolkit carga las variables de entorno que agregó para iniciar los servicios durante la depuración local.

Nota:

Asegúrese de iniciar una nueva depuración local después de agregar nuevas variables de entorno, ya que las variables de entorno no admiten la recarga activa.

Depurar componente parcial

El kit de herramientas de Teams usa la depuración de varios destinos de Visual Studio Code para depurar la pestaña, el bot, la extensión de mensajes y Azure Functions al mismo tiempo. Puede actualizar .vscode/launch.json y .vscode/tasks.json para depurar componentes parciales. Si desea depurar la pestaña solo en una pestaña más un bot con un proyecto de Azure Functions, siga estos pasos:

  1. Actualice "Attach to Bot" y "Attach to Backend" a partir del compuesto de depuración en .vscode/launch.json.

    {
    "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

}

  2. Actualice "Start Backend" y "Start Bot" desde la tarea Iniciar todo en .vscode/tasks.json.

    {

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

      ]

}

Next

Depurar la aplicación localmente

Vea también