{"id":9692,"date":"2022-03-07T13:09:58","date_gmt":"2022-03-07T21:09:58","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=9692"},"modified":"2022-05-25T10:33:36","modified_gmt":"2022-05-25T17:33:36","slug":"debugging-microsoft-teams-app-locally-with-teams-toolkit","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/debugging-microsoft-teams-app-locally-with-teams-toolkit\/","title":{"rendered":"Debugging Microsoft Teams app locally with Teams Toolkit"},"content":{"rendered":"

In the previous post<\/a>, I introduced some of the new features in Microsoft Teams Toolkit v3 to empower enterprise Teams developers. In this article, I will show you the improved local debug experience in the Toolkit and new features introduced in version 3.4.<\/p>\n

First, you need to install the Teams Toolkit extension in Visual Studio Code or update it to the latest version if you already have it. And if this is the first time interacting with Teams Toolkit, I recommend going through the step-by-step tutorial, Get started<\/strong><\/a>\u00a0with JavaScript on Microsoft Teams developer platform documentation first.<\/p>\n

\"Image<\/a><\/p>\n

 <\/p>\n

\u2328\ufe0fDebugging with “F5”<\/h2>\n

Debugging, casually referred to as\u00a0F5<\/em>\u00a0(function key) among developers, is one of the key features of\u00a0Visual Studio Code<\/a>, and this built-in debugger helps accelerate your edit, compile, and debug loop.\u00a0Teams Toolkit uses the VS Code feature to let you run your app in Teams client and debug it during the development.<\/p>\n

To enable local debugging in Teams Toolkit, first,\u00a0make sure you are logged in with your M365 account<\/em>\u00a0under the\u00a0Accounts<\/strong>\u00a0section in Toolkit. Then:<\/p>\n

    \n
  1. On VS Code, go to the\u00a0Run and Debug<\/strong>\u00a0view in the Activity Bar<\/li>\n
  2. Select either\u00a0Debug (Chrome)<\/strong>\u00a0or\u00a0Debug (Edge)<\/strong>\u00a0from the dropdown menu on the debug button and click the \u25b6\ufe0f (Start) icon<\/li>\n<\/ol>\n

    \"Image<\/a><\/p>\n

    Alternatively, you can just press\u00a0F5<\/strong>\u00a0function key on your keyboard.<\/p>\n

    Toolkit will launch Teams client in a new Chrome or Edge browser, where you can add your app.<\/p>\n

    \u26a0\ufe0f If this is the first time with Teams Toolkit, you will be prompted to confirm to add an SSL certificate. Please agree to continue.\nSince Teams requires https Tab hosting endpoint, a localhost development certificate will be automatically generated and installed to your system after your confirmation.<\/p><\/blockquote>\n

    <\/a>\ud83d\udccd Using Breakpoints<\/h2>\n

    Breakpoints in VS Code<\/a> is also available in the Toolkit to debug your code for tab, bot, message extension, and Azure Functions. You can toggle the breakpoints while your app is running on Teams client on browser.<\/p>\n

    Click the left margin next to the line you wish to stop so the breakpoint will appear as a red dot \ud83d\udd34. Then run the code (F5).<\/p>\n

    Your code will pause before the marked execution.<\/p>\n

    \"Image<\/a><\/p>\n

    Once a debug session starts, the Debug toolbar will appear on the top of the editor:<\/p>\n

    \"Image<\/a><\/p>\n