Depurar la aplicación de Teams localmente

  • Artículo

Microsoft Teams Toolkit le ayuda a depurar y obtener una vista previa de la aplicación de Microsoft Teams localmente. Durante el proceso de depuración, Teams Toolkit inicia automáticamente app services, inicia depuradores y carga la aplicación Teams. Puede obtener una vista previa de la aplicación de Teams en el cliente web de Teams localmente después de la depuración.

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

El kit de herramientas de Teams en Microsoft Visual Studio Code proporciona las características para automatizar la depuración de la aplicación de Teams localmente. Visual Studio Code permite depurar la pestaña, el bot y la extensión de mensaje. Debe configurar Teams Toolkit antes de depurar la aplicación.

Nota:

El antiguo proyecto del kit de herramientas de Teams se actualiza para usar nuevas tareas. Para obtener más información, consulte el documento tareas.

Configuración del kit de herramientas de Teams para la depuración

Los pasos siguientes le ayudarán a configurar el kit de herramientas de Teams antes de iniciar el proceso de depuración:

  1. Seleccione Depurar en Teams (Edge) o Depurar en Teams (Chrome) en la lista desplegable EJECUTAR Y DEPURAR ▷ .

    Captura de pantalla que muestra la opción Explorador.

  2. Seleccione Ejecutar>depuración de inicio (F5).

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

  3. Seleccione Create a Microsoft 365 Testing Tenant to Microsoft 365 account (Crear un inquilino de pruebas de Microsoft 365 en una cuenta de Microsoft 365).

    Captura de pantalla que muestra la opción Iniciar sesión resaltada.

    Sugerencia

    Puede seleccionar Crear un inquilino de pruebas de Microsoft 365 para obtener información sobre el Programa para desarrolladores de Microsoft 365. Se abre el explorador web predeterminado para que pueda iniciar sesión en su cuenta de Microsoft 365 con sus credenciales.

  4. Seleccione Instalar para instalar el certificado de desarrollo para localhost.

    Captura de pantalla que muestra el certificado que se va a instalar.

    Sugerencia

    Puede seleccionar Más información para conocer el certificado de desarrollo.

  5. Seleccione Sí en el cuadro de diálogo Advertencia de seguridad .

    Captura de pantalla que muestra la entidad de certificación para instalar el certificado.

El kit de herramientas inicia una nueva instancia del explorador Microsoft Edge o Chrome en función de la selección y abre una página web para cargar el cliente de Teams.

Depuración de la aplicación

Después del proceso de instalación inicial, Teams Toolkit inicia los procesos siguientes:

Inicia los servicios de aplicaciones

Ejecuta tareas como se define en .vscode/tasks.json. De forma predeterminada, el nombre de la tarea es "Start application". Si el proyecto contiene más de un componente, habrá más tareas dependientes.

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

En la imagen siguiente se muestran los nombres de las tareas en las pestañas OUTPUT y TERMINAL de la Visual Studio Code mientras se ejecuta la pestaña, el bot o la extensión de mensaje y Azure Functions.

Captura de pantalla que muestra Start app services (Iniciar app services).

Inicio del túnel local

Use dev tunnel como servicio de túnel local para que el punto de conexión de mensaje de bot local sea público.

Túnel de desarrollo

Para migrar manualmente la tarea de túnel local desde un proyecto v4, actualice el código siguiente en el .vscode/tasks.json archivo:

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

Para usar otro puerto para el servicio bot local, cambie en portNumber el .vscode/tasks.json archivo y cambie también en portNumber el index.js archivo o index.ts .

En la tabla siguiente se enumeran los argumentos necesarios:

Argumentos Tipo Obligatorio Descripción
type string necesario Tipo de servicio de túnel que se va a usar. Este argumento debe establecerse en dev-tunnel.
env string opcional Nombre del entorno. Teams Toolkit escribe las variables de entorno definidas en en output el .env.<env> archivo.
ports matriz necesario Matriz de configuraciones de puerto, cada una especificando el número de puerto local, el protocolo y la configuración del control de acceso.

El ports argumento debe ser una matriz de objetos, con cada objeto que especifique la configuración de un puerto determinado. Cada objeto debe contener los campos siguientes:

Port Tipo Obligatorio Descripción
portNumber número necesario Número de puerto local del túnel.
protocol string necesario Protocolo del túnel.
access string opcional Configuración del control de acceso para el túnel. Este valor se puede establecer en private o public. Si no se especifica, el valor predeterminado es private.
writeToEnvironmentFile object opcional Clave de las variables de entorno de dominio de túnel y punto de conexión de túnel que se escriben en el .env archivo.

El writeToEnvironmentFile objeto contiene dos campos:

WriteToEnvironmentFile Tipo Obligatorio Descripción
endpoint string opcional Clave de la variable de entorno de punto de conexión de túnel.
domain string opcional Clave de la variable de entorno de dominio de túnel.

Cuando writeToEnvironmentFile se incluye, las variables de entorno especificadas se escriben en el .env archivo. Cuando se omite el campo, no se escribe ninguna variable de entorno en el archivo.

Inicia las configuraciones de depuración

Inicia las configuraciones de depuración tal como se define en .vscode/launch.json.

Captura de pantalla que muestra el depurador de inicio.

En la tabla siguiente se enumeran los nombres y tipos de configuración de depuración para el proyecto con la aplicación de extensión de pestaña, bot o mensaje y Azure Functions:

Componente Nombre de la configuración de depuración Tipo de configuración de depuración
Tab Conexión a front-end (edge) o conexión a front-end (Chrome) msedge o chrome
Bot o extensión de mensajes Adjuntar al bot Nodo
Azure Functions Adjuntar al back-end Nodo

En la tabla siguiente se enumeran los nombres y tipos de configuración de depuración para el proyecto con la aplicación bot, Azure Functions y sin aplicación de pestaña:

Componente Nombre de la configuración de depuración Tipo de configuración de depuración
Bot o extensión de mensaje Iniciar bot (Edge) o iniciar bot (Chrome) msedge o chrome
Bot o extensión de mensaje Adjuntar al bot Nodo
Azure Functions Adjuntar al back-end Nodo

Carga la aplicación de Teams

La configuración Asociar a front-end o iniciar aplicación inicia la instancia del explorador Microsoft Edge o Chrome para cargar el cliente de Teams en la página web. Una vez cargado el cliente de Teams, cargue la aplicación de Teams controlada por la dirección URL de carga definida en las configuraciones de inicio de Microsoft Teams. Cuando el cliente de Teams se cargue en el explorador web, seleccione Agregar o seleccione una opción en la lista desplegable según sus necesidades.

Captura de pantalla que muestra la opción Agregar depuración local.

La aplicación se ha agregado a Teams.

Paso siguiente

Depuración del proceso en segundo plano

Vea también