Depurar la aplicación de Teams localmente
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:
Seleccione Depurar en Teams (Edge) o Depurar en Teams (Chrome) en la lista desplegable EJECUTAR Y DEPURAR ▷ .
Seleccione Ejecutar>depuración de inicio (F5).
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).
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.
Seleccione Instalar para instalar el certificado de desarrollo para localhost.
Sugerencia
Puede seleccionar Más información para conocer el certificado de desarrollo.
Seleccione Sí en el cuadro de diálogo Advertencia de seguridad .
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
- Inicia las configuraciones de depuración
- Carga la aplicación de Teams
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 Visual Studio Code mientras se ejecuta la pestaña, el bot o la extensión de mensaje y Azure Functions.
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 |
objeto | 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.
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.
La aplicación se ha agregado a Teams.