[Doc Feature][Debug apps in Teams Desktop Client][3927987]

msteams-platform/TOC.yml

@@ -193,6 +193,9 @@
  href: toolkit/debug-message-extension-app-in-test-tool.md 
  - name: Debug your Teams app locally
  href: toolkit/debug-local.md
+ - name: Debug apps in Teams desktop client
+ href: toolkit/debug-apps-in-Teams-desktop-client.md
+ displayName: debug app in desktop client 
  - name: Debug background process
  href: toolkit/debug-background-process.md
  - name: Debug for mobile

msteams-platform/toolkit/debug-apps-in-Teams-desktop-client.md

@@ -0,0 +1,122 @@
+---
+title: Debug apps in Teams Desktop Client
+author: surbhigupta
+description: Learn about Debug apps in Teams Desktop Client.
+ms.topic: conceptual
+ms.author: surbhigupta
+ms.localizationpriority: high
+---
+
+# Debug apps in Teams Desktop Client
+
+Microsoft Teams Toolkit helps you to debug and preview your Microsoft Teams app in desktop client. During the debug process, Teams Toolkit automatically starts app services, open debuggers, and uploads Teams app. You can preview your Teams app in Teams desktop client after debugging.
+
+The following are the advantages of Teams desktop client:
+
+* Improves performance
+* Reduces time-to-F5
+* Improves coverage of debug targets
+
+## Capabilities of Teams desktop client
+
+Teams desktop client incorporates debugging capabilities in the app templates scaffolded by the Teams Toolkit:
+
+* Bot
+* Copilot Engine Copilot
+* Custom Copilot
+* Message Extension
+
+## Prerequisites
+
+Ensure you install the following tools for building and deploying your app in Teams desktop client:
+
+|   | Install | For using... |
+| --- | --- | --- |
+|   | [Teams Toolkit](install-Teams-Toolkit.md) | A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest prerelease version. |
+|   | [Node.js](https://nodejs.org/en/download/) | Back-end JavaScript runtime environment. For more information, see [node.js version compatibility table for project type](~/toolkit/build-environments.md#nodejs-version-compatibility-table-for-project-type). |
+|   | [Visual Studio Code](https://code.visualstudio.com/download) | JavaScript, TypeScript, or SharePoint Framework (SPFx) build environments. Use the latest version. |
+|   | [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. |
+
+## Debug in Teams desktop client
+
+Ensure you are logged into your Microsoft 365 account through Teams Toolkit.
+
+1. Open Visual Studio Code (VS Code).
+
+1. Select the Teams Toolkit :::image type="icon" source="../assets/images/teams-toolkit-v2/teams-toolkit-sidebar-icon.PNG" border="false"::: icon in the VS Code **Activity Bar**.
+
+1. Select **Create a New App**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/create-project.png" alt-text="Screenshot shows the location of the Create New Project link in the Teams Toolkit sidebar.":::
+
+1. Select **Custom Engine Copilot**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug-apps-in-teams-desktop-client/custom-engine-copilot.png" alt-text="Screenshot shows the Teams Toolkit app templates.":::
+
+1. Select **Basic AI Chatbot**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug-apps-in-teams-desktop-client/app-feature.png" alt-text="Screenshot shows the app feature to add to your new app.":::
+
+1. Select **JavaScript**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-bot/select-language-tab.png" alt-text="Screenshot shows the option to select the programming language.":::
+
+1. Select **OpenAI**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug-apps-in-teams-desktop-client/service-for-large-language-model.png" alt-text="Screenshot shows LLM in Visual Studio Code.":::
+
+1. Enter the OpenAI service key.
+
+1. Select **Default folder**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-bot/select-default-location.png" alt-text="Screenshot shows the selection of default location.":::
+
+ To change the default location, follow these steps:
+
+ 1. Select **Browse**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-bot/select-browse.png" alt-text="Screenshot shows the selection of browse location option.":::
+
+ 1. Select the location for the project workspace.
+ 1. Select **Select Folder**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/select-folder.png" alt-text="Screenshot shows the folder to select.":::
+
+1. Enter a suitable name for your app and then select the **Enter** key.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/first-bot/hello-bot.png" alt-text="Screenshot shows where to enter the app name.":::
+
+1. From the left pane, select **Run and Debug** (`Ctrl+Shift+D`) and select **Debug in Teams (Desktop)** from the dropdown list.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug-apps-in-teams-desktop-client/debug-in-teams-desktop.png" alt-text="Screenshot shows the option to select debug in Teams (Desktop).":::
+
+1. Ensure your Teams desktop login matches your Microsoft 365 account used in Teams Toolkit and then select **Continue**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug-apps-in-teams-desktop-client/desktop-login-matches.png" alt-text="Screenshot shows the desktop login.":::
+
+ Teams desktop client requests to add your app.
+
+1. Select **Add**.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug-apps-in-teams-desktop-client/add-app.png" alt-text="Screenshot shows the add button to add the app to Teams desktop client.":::
+
+ A chat window opens.
+
+1. In the message compose area, send a message to invoke the bot.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug-apps-in-teams-desktop-client/desktop-client.png" alt-text="Screenshot shows the app added to Teams desktop client.":::
+
+ > [!NOTE]
+ > The system level notification for account matching appears only once per project. In subsequent debug sessions, Teams Toolkit sends reminders about the account through VS Code notifications.
+ > :::image type="content" source="../assets/images/teams-toolkit-v2/debug-apps-in-teams-desktop-client/subsequent-desktop-login.png" alt-text="Screenshot shows the subsequent desktop login notification in vs code.":::
+
+1. You can add breakpoints and [hot reload](debug-overview.md#hot-reload) your changes.
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug-apps-in-teams-desktop-client/hot-reload.png" alt-text="Screenshot shows an example of the breakpoints in app.":::
+
+ :::image type="content" source="../assets/images/teams-toolkit-v2/debug-apps-in-teams-desktop-client/after-hot-reload.png" alt-text="Screenshot shows an example after hot reload of an app.":::
+
+## See also
+
+* [Teams Toolkit Overview](teams-toolkit-fundamentals.md)
+* [Debug background process](debug-background-process.md)

msteams-platform/whats-new.md

@@ -30,11 +30,9 @@ Discover Microsoft Teams platform features that are generally available (GA). Yo
 
 Teams platform features that are available to all app developers.
 
-**2024 August**
+**2024 September**
 
-* ***August 26, 2024***: [Enhanced user experience for Teams app susbscriptions purchased from Teams Store.](concepts/deploy-and-publish/appsource/prepare/end-user-purchase-experience.md#subscription-purchase-experience)
-* ***August 22, 2024***: [Dev Tools for Teams tabs are available in the new Microsoft Teams client.](tabs/how-to/developer-tools.md)
-* ***August 21, 2024***: [Use sample prompts to guide the users for using various plugins within Copilot.](messaging-extensions/high-quality-message-extension.md#sample-prompts)
+***September 17, 2024***: [Microsoft Teams Toolkit helps you to debug and preview your Microsoft Teams app in desktop client.](toolkit/debug-apps-in-teams-desktop-client.md)
 
 :::column-end:::
 :::row-end:::
@@ -48,6 +46,9 @@ Teams platform features that are available to all app developers.
 
 | **Date** | **Update** | **Find here** |
 | -------- | --------- | ----------------|
+| 26/08/2024 | Enhanced user experience for Teams app susbscriptions purchased from Teams Store. | Monetize your app > Purchase and manage app subscriptions and licenses > [Subscription purchase experience](concepts/deploy-and-publish/appsource/prepare/end-user-purchase-experience.md#subscription-purchase-experience) |
+| 22/08/2024 | Dev Tools for Teams tabs are available in the new Microsoft Teams client. | Test your app > Tabs > [Dev Tools for Microsoft Teams Tab](tabs/how-to/developer-tools.md) |
+| 21/08/2024 | Use sample prompts to guide the users for using various plugins within Copilot. | Build message extensions > Build message extensions using Bot Framework > Search Commands > [Sample prompts](messaging-extensions/high-quality-message-extension.md#sample-prompts) |
 | 31/07/2024 | Use app validation tool to validate your Teams app in Developer Portal for Teams. | Tools and SDKs > Tools > Developer Portal for Teams > [Publish](concepts/build-and-test/manage-your-apps-in-developer-portal.md#publish) |
 | 03/07/2024 | share content to the meeting Stage simplifies app content sharing during meetings and provides a seamless multi-player viewing experience. | Build apps for Teams meetings and calls > Enable and configure apps for Teams meetings > [Share to stage](apps-in-teams-meetings/build-apps-for-teams-meeting-stage.md#screen-share-content-to-meetings) |
 | 02/07/2024 | Extend bot-based message extension plugins to Teams meetings. | Build message extensions > Build message extensions using Bot Framework > Search Commands > [Enable message extension as a plugin for Copilot for meetings](messaging-extensions/build-bot-based-plugin.md#enable-message-extension-as-a-plugin-for-copilot-for-meetings) |