Skip to content

[Dev-Docs AI Improvement]: Debug your Microsoft Teams app using Microsoft Visual Studio #13658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
docsautomation wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Dev-Docs AI Improvement]: Debug your Microsoft Teams app using Microsoft Visual Studio #13658

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions msteams-platform/toolkit/toolkit-v4/debug-overview-vs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,34 +10,34 @@ ms.date: 03/21/2022

# Debug your Microsoft Teams app using Microsoft Visual Studio

Microsoft 365 Agents Toolkit (previously known as Teams Toolkit) automates app startup services, initiates debugging, and uploads Teams app. After debugging, you can preview the Teams app in Teams web client. You can also customize debug settings to use your bot endpoints, or environment variables to load your configured app. Visual Studio allows you to debug tabs, bots, and message extensions.
Copy link
Collaborator

@SharanGarcha-MSFT SharanGarcha-MSFT Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

retain original

Microsoft 365 Agents Toolkit (previously known as Teams Toolkit) automates app startup services, initiates debugging, and uploads Teams app. After debugging, you can preview Teams app in Teams web client. You can also customize debug settings to use your bot endpoints or environment variables to load your configured app. Visual Studio allows you to debug tabs, bots, and message extensions.

## Prerequisites

|   | Install | For using... |
| --- | --- | --- |
|   | Visual Studio 2022 | You can install the enterprise edition of Visual Studio, and install the **ASP.NET** workload and Microsoft Teams Development Tools. Use the latest version |
|   | Visual Studio 2022 | You can install enterprise edition of Visual Studio and install the **ASP.NET** workload and Microsoft Teams Development Tools. Use latest version. |
Copy link
Collaborator

@SharanGarcha-MSFT SharanGarcha-MSFT Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

retain original

|   | Microsoft 365 Agents Toolkit | A Visual Studio extension that creates a project scaffolding for your app. Use latest version. |
|   | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and call-all in one place. |
|   | [Prepare your Microsoft 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Teams account with the appropriate permissions to install an app. |
|   | [Microsoft 365 developer account](~/concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Teams account with the appropriate permissions to install an app. |
|   | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and call—all in one place. |
|   | [Prepare your Microsoft 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Teams account with appropriate permissions to install an app. |
|   | [Microsoft 365 developer account](~/concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Teams account with appropriate permissions to install an app. |
|   | Azure Tools and [Microsoft Azure CLI](/cli/azure/install-azure-cli) | Azure tools to access stored data or deploy a cloud-based backend for your Teams app in Azure. |

## Key features of Agents Toolkit

Agents Toolkit automates the local debugging process for the following key features:
Agents Toolkit automates the local debugging process for these key features:

* Select Microsoft 365 Account: Agents Toolkit prepares local debug dependencies and registers your Teams app in your tenant account. For Bot and Message Extension apps, Agents Toolkit registers and configures bot.
* Select Microsoft 365 Account: Agents Toolkit prepares local debug dependencies and registers Teams app in your tenant account. For Bot and Message Extension apps, Agents Toolkit registers and configures bot.
Copy link
Collaborator

@SharanGarcha-MSFT SharanGarcha-MSFT Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

retain original


* Start debugging: You can perform debugging with a single operation, press **F5** to start debugging. Agents Toolkit builds code, starts services, and launches the app in your browser.
* Start debugging: You can debug with a single operation—press **F5** to start debugging. Agents Toolkit builds code, starts services, and launches app in your browser.
Copy link
Collaborator

@SharanGarcha-MSFT SharanGarcha-MSFT Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

retain the comma


* Toggle breakpoints: You can toggle breakpoints in the source code of tabs, bots, message extensions, and Azure Functions. The breakpoints execute when you interact with the Teams app in your web browser.
* Toggle breakpoints: You can toggle breakpoints in the source code of tabs, bots, message extensions, and Azure Functions. The breakpoints execute when you interact with Teams app in your web browser.
Copy link
Collaborator

@SharanGarcha-MSFT SharanGarcha-MSFT Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

retain the original


The following image shows the toggle breakpoints:

:::image type="content" source="../../assets/images/toolkit-v2/toolkit-vs/vs-localdebug-toggle-breakpoint.png" alt-text="Screenshot shows the local debug toggle breakpoints." lightbox="../../assets/images/toolkit-v2/toolkit-vs/vs-localdebug-toggle-breakpoint.png":::

* Hot Reload: Select **Hot Reload** to apply your changes in your Teams app when you want to update and save the source code during debugging.
* Hot Reload: Select **Hot Reload** to apply changes in Teams app when you update and save source code during debugging.

:::image type="content" source="../../assets/images/toolkit-v2/toolkit-vs/vs-localdebug-hot-reload.png" alt-text="Screenshot shows the select hot reload icon.":::

Expand All @@ -46,21 +46,21 @@ Agents Toolkit automates the local debugging process for the following key featu
:::image type="content" source="../../assets/images/toolkit-v2/toolkit-vs/vs-localdebug-hot-reload-filesave.png" alt-text="Screenshot shows the select hot reload on file save.":::

> [!Tip]
> To learn more about the Hot Reload function, see [.NET Hot Reload experience](https://devblogs.microsoft.com/dotnet/introducing-net-hot-reload/).
> To learn more about Hot Reload, see [.NET Hot Reload experience](https://devblogs.microsoft.com/dotnet/introducing-net-hot-reload/).

* Stop debugging: Select **Stop Debugging (Shift+F5)** when the local debug is complete.
Copy link
Collaborator

@SharanGarcha-MSFT SharanGarcha-MSFT Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

after local debug is completed

* Stop debugging: Select **Stop Debugging (Shift+F5)** when local debugging completes.

:::image type="content" source="../../assets/images/toolkit-v2/toolkit-vs/vs-localdebug-Stopdebug.png" alt-text="Screenshot shows the select stop debug icon.":::

### Add environment variables

You can add the `environmentVariables` to the `launchSettings.json` file.
You can add `environmentVariables` to the `launchSettings.json` file.

:::image type="content" source="../../assets/images/toolkit-v2/toolkit-vs/vs-localdebug-environment-variables.png" alt-text="Screenshot shows the add custom environment variables.":::

### Launch Teams app as a web app

You can launch Teams app as a web app instead of running the app in Teams client. To launch your Teams app as a web app, follow these steps:
You can launch Teams app as a web app instead of running it in Teams client. To launch Teams app as a web app, follow these steps:

1. In Solution Explorer, under Project, select **Properties** > **launchSettings.json**.

Expand Down Expand Up @@ -89,4 +89,4 @@ You can launch Teams app as a web app instead of running the app in Teams client
* [Debug background process](debug-background-process-vs.md)
* [Use Microsoft 365 Agents Toolkit to provision cloud resources](provision-vs.md)
* [Deploy to the cloud](deploy-vs.md)
* [Preview and customize Teams app manifest](TeamsFx-preview-and-customize-app-manifest-vs.md)
* [Preview and customize Teams app manifest](TeamsFx-preview-and-customize-app-manifest-vs.md)