Edit

Share via

Debug your Microsoft Teams app using Microsoft Visual Studio

  • Article

Microsoft 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.

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
  Teams Toolkit A Visual Studio extension that creates a project scaffolding for your app. Use latest version.
  Microsoft Teams 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 Access to Teams account with the appropriate permissions to install an app.
  Microsoft 365 developer account Access to Teams account with the appropriate permissions to install an app.
  Azure Tools and Microsoft Azure CLI Azure tools to access stored data or deploy a cloud-based backend for your Teams app in Azure.

Key features of Teams Toolkit

Teams Toolkit automates the local debugging process for the following key features:

  • Prepare Teams app dependencies: Teams Toolkit prepares local debug dependencies and registers your Teams app in your tenant account. For Bot and Message Extension apps, Teams Toolkit registers and configures bot.

  • Start debugging: You can perform debugging with a single operation, press F5 to start debugging. Teams Toolkit builds code, starts services, and launches the app in your 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 the Teams app in your web browser.

    The following image shows the toggle breakpoints:

    Screenshot shows the local debug toggle breakpoints.

  • 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.

    Screenshot shows the select hot reload icon.

    To enable auto Hot Reload, select Hot Reload on File Save from the dropdown.

    Screenshot shows the select hot reload on file save.

    Tip

    To learn more about the Hot Reload function, see .NET Hot Reload experience.

  • Stop debugging: Select Stop Debugging (Shift+F5) when the local debug is complete.

    Screenshot shows the select stop debug icon.

Add environment variables

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

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:

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

  2. Remove the launchUrl property.

    Screenshot shows the launch teams as a web app by removing launchurl.

  3. Right-click on Solution (in this scenario the project name is MyTeamsApp1) and select Properties.

    Screenshot shows the right click solution and select properties.

    A solution property pages dialog box appears.

  4. Select Configuration Properties > Configuration in the dialog box.

  5. Clear the Deploy checkbox.

  6. Select OK.

    Screenshot shows the uncheck deploy in configuration properties.

Next

Debug your app locally

See also