{"id":12162,"date":"2022-11-02T08:00:19","date_gmt":"2022-11-02T15:00:19","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=12162"},"modified":"2022-11-02T12:32:38","modified_gmt":"2022-11-02T19:32:38","slug":"customizing-f5-debugging-in-teams-toolkit-for-visual-studio-code","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/customizing-f5-debugging-in-teams-toolkit-for-visual-studio-code\/","title":{"rendered":"Customizing F5 debugging in Teams Toolkit for Visual Studio Code"},"content":{"rendered":"<p dir=\"auto\">Teams Toolkit introduced some new features earlier this year that have been added in the latest version to improve your <a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/debugging-microsoft-teams-app-locally-with-teams-toolkit\/\" rel=\"nofollow\">debugging experience &#8211; <\/a>Prerequisite Checker and Customizing Debug Settings. With the latest Toolkit in v.4.1.0 and greater, you can now customize the debugging experiences even more!<\/p>\n<p dir=\"auto\">If this is your first time with Teams Toolkit, please check out these tutorials before you begin:<\/p>\n<ul dir=\"auto\">\n<li><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/beginners-crash-course-to-build-apps-for-teams-using-teams-toolkit-for-visual-studio-code\/\" rel=\"nofollow\">Beginners\u2019 crash course to build apps for Teams using Teams Toolkit for Visual Studio Code<\/a><\/li>\n<li><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/roll-a-dice-building-a-command-bot-for-microsoft-teams-using-teams-toolkit-with-visual-studio-code\/\" rel=\"nofollow\">Roll A Dice! &#8211; Building a Command Bot for Microsoft Teams Using Team Toolkit v4 with VS Code<\/a><\/li>\n<\/ul>\n<h2 dir=\"auto\"><a id=\"user-content--debugging-experiences-in-teams-toolkit\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/866a56939380a1160c10c52511ea387b#-debugging-experiences-in-teams-toolkit\" aria-hidden=\"true\"><\/a>\ud83d\udc1b Debugging experiences in Teams Toolkit<\/h2>\n<p dir=\"auto\">Debugging in VS Code is casually referred to as\u00a0<strong>F5<\/strong>\u00a0among developers, is one of the key features of Visual Studio Code, and this built-in debugger helps accelerate your edit, compile, and debug loop.<\/p>\n<p dir=\"auto\">When you created any project with Teams Toolkit in VS Code, you also use this F5 debugger to run the code. While you are waiting, Teams Toolkit runs various process, check prerequisites, and output the results like this:<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-1.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12168 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-1.png\" alt=\"Screenshot of debug output from Teams Toolkit in VS Code\" width=\"2048\" height=\"1358\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-1.png 2048w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-1-300x199.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-1-1024x679.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-1-768x509.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-1-1536x1019.png 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/p>\n<p dir=\"auto\">In the Output section, you can view what the debugger is doing. In this screenshot, you can see a checklist, including whether you have a specific Node.js, your Microsoft 365 account status, etc.<\/p>\n<p dir=\"auto\">So, where are these tasks and the checklist are defined? It is in <strong>.vscode<\/strong>\/<strong>tasks.json<\/strong> in the generated project, and you can customize in the way you want. Let&#8217;s take a look at some customization examples for both a <em>tab app<\/em>\u00a0and\u00a0<em>bot app<\/em>.<\/p>\n<h2 dir=\"auto\"><a id=\"user-content--customizing-tasksjson-for-tab-apps\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/866a56939380a1160c10c52511ea387b#-customizing-tasksjson-for-tab-apps\" aria-hidden=\"true\"><\/a>\ud83d\uddc2 Customizing tasks.json for tab apps<\/h2>\n<p dir=\"auto\">First, let&#8217;s create a new app by choosing the single sign-on (SSO)-enabled tab from the menu:<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-2.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12167 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-2.png\" alt=\"Screenshot of app creation in Teams Toolkit\" width=\"2048\" height=\"1362\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-2.png 2048w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-2-300x200.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-2-1024x681.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-2-768x511.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-2-1536x1022.png 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/p>\n<p dir=\"auto\">Once the project is generated, open\u00a0<strong>.vscode<\/strong>\/<strong>tasks.json<\/strong> and see what is defined:<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-3.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12166 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-3.png\" alt=\"Screenshot of app creation in Teams Toolkit\" width=\"2048\" height=\"1360\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-3.png 2048w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-3-300x199.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-3-1024x680.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-3-768x510.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-3-1536x1020.png 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/p>\n<p dir=\"auto\">You may want to try debugging to see how each item defined in the <strong>tasks.json<\/strong> runs and display in the Output by default:<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-4.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12165 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-4.png\" alt=\"Screenshot of Teams Toolkit Debug Output\" width=\"2048\" height=\"1360\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-4.png 2048w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-4-300x199.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-4-1024x680.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-4-768x510.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-4-1536x1020.png 1536w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/p>\n<p dir=\"auto\">Now, let&#8217;s see how to customize the debugging flow by editing the <strong>tasks.json<\/strong>\u00a0file.<\/p>\n<h2 dir=\"auto\"><a id=\"user-content--customizing-prerequisites\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/866a56939380a1160c10c52511ea387b#-customizing-prerequisites\" aria-hidden=\"true\"><\/a>\u2705 Customizing prerequisites<\/h2>\n<p dir=\"auto\">If you want to skip certain processes, such as checking prerequisites and installing npm packages, just comment out where they are defined in <code>\"tasks\"<\/code>:<\/p>\n<div class=\"highlight highlight-source-js\" dir=\"auto\">\n<pre><span class=\"pl-s\">\"tasks\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n  <span class=\"pl-kos\">{<\/span>\r\n    <span class=\"pl-s\">\"label\"<\/span>: <span class=\"pl-s\">\"Start Teams App Locally\"<\/span><span class=\"pl-kos\">,<\/span>\r\n    <span class=\"pl-s\">\"dependsOn\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n      <span class=\"pl-c\">\/\/\"Validate &amp; install prerequisites\",<\/span>\r\n      <span class=\"pl-c\">\/\/\"Install npm packages\",<\/span>\r\n      <span class=\"pl-s\">\"Set up tab\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-s\">\"Set up SSO\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-s\">\"Build &amp; upload Teams manifest\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-s\">\"Start services\"<\/span>\r\n  <span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span><\/pre>\n<\/div>\n<p dir=\"auto\">Or you can select prerequisites validation independently. Scroll down to the next object in JSON then editing these lines. For example, if you want to skip checking if Node.js is installed, comment the line out:<\/p>\n<div class=\"highlight highlight-source-js\" dir=\"auto\">\n<pre><span class=\"pl-kos\">{<\/span>\r\n  <span class=\"pl-s\">\"label\"<\/span>: <span class=\"pl-s\">\"Validate &amp; install prerequisites\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"type\"<\/span>: <span class=\"pl-s\">\"teamsfx\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"command\"<\/span>: <span class=\"pl-s\">\"debug-check-prerequisites\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"args\"<\/span>: <span class=\"pl-kos\">{<\/span>\r\n    <span class=\"pl-s\">\"prerequisites\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n      <span class=\"pl-c\">\/\/\"nodejs\",<\/span>\r\n      <span class=\"pl-s\">\"m365Account\"<\/span><span class=\"pl-kos\">,<\/span> \r\n      <span class=\"pl-s\">\"devCert\"<\/span><span class=\"pl-kos\">,<\/span> \r\n      <span class=\"pl-s\">\"portOccupancy\"<\/span>\r\n    <span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span><\/pre>\n<\/div>\n<p dir=\"auto\">Try running F5 to see if the processes are skipped.<\/p>\n<h3 dir=\"auto\"><a id=\"user-content--customizing-npm-commands\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/866a56939380a1160c10c52511ea387b#-customizing-npm-commands\" aria-hidden=\"true\"><\/a>\ud83d\udece Customizing npm commands<\/h3>\n<p dir=\"auto\">Also, you can customize\u00a0<code>npm install<\/code>\u00a0commands by adding an optional argument, for example,\u00a0<code>--force<\/code>\u00a0to force npm to fetch remote resources even if a local copy exists:<\/p>\n<div class=\"highlight highlight-source-js\" dir=\"auto\">\n<pre><span class=\"pl-kos\">{<\/span>\r\n  <span class=\"pl-s\">\"label\"<\/span>: <span class=\"pl-s\">\"Install npm packages\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"type\"<\/span>: <span class=\"pl-s\">\"teamsfx\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"command\"<\/span>: <span class=\"pl-s\">\"debug-npm-install\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"args\"<\/span>: <span class=\"pl-kos\">{<\/span>\r\n    <span class=\"pl-s\">\"projects\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n      <span class=\"pl-kos\">{<\/span>\r\n        <span class=\"pl-s\">\"cwd\"<\/span>: <span class=\"pl-s\">\"${workspaceFolder}\/tabs\"<\/span><span class=\"pl-kos\">,<\/span>\r\n        <span class=\"pl-s\">\"npmInstallArgs\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n          <span class=\"pl-s\">\"--no-audit\"<\/span><span class=\"pl-kos\">,<\/span>\r\n          <span class=\"pl-s\">\"--force\"<\/span> <span class=\"pl-c\">\/\/ added!<\/span>\r\n        <span class=\"pl-kos\">]<\/span>\r\n<span class=\"pl-kos\">.<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-kos\">.<\/span><\/pre>\n<\/div>\n<h3 dir=\"auto\"><a id=\"user-content--changing-service-port\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/866a56939380a1160c10c52511ea387b#-changing-service-port\" aria-hidden=\"true\"><\/a>\ud83d\udef3 Changing service port<\/h3>\n<p dir=\"auto\">Tabs in tab apps are basically web pages embedded in Teams client, and they run on a specific port when you debug locally. By default, it is set\u00a0<code>53000<\/code>\u00a0and the web portion of your app can be debugged in\u00a0<code>https:\/\/localhost:53000<\/code>. The Toolkit debugger checks if the port is available.<\/p>\n<p dir=\"auto\">If you would like to change the port, you need to edit two places in the JSON file:<\/p>\n<div class=\"highlight highlight-source-js\" dir=\"auto\">\n<pre><span class=\"pl-kos\">{<\/span>\r\n  <span class=\"pl-s\">\"label\"<\/span>: <span class=\"pl-s\">\"Validate &amp; install prerequisites\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"type\"<\/span>: <span class=\"pl-s\">\"teamsfx\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"command\"<\/span>: <span class=\"pl-s\">\"debug-check-prerequisites\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"args\"<\/span>: <span class=\"pl-kos\">{<\/span>\r\n    <span class=\"pl-s\">\"prerequisites\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n      <span class=\"pl-s\">\"nodejs\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-s\">\"m365Account\"<\/span><span class=\"pl-kos\">,<\/span> \r\n      <span class=\"pl-s\">\"devCert\"<\/span><span class=\"pl-kos\">,<\/span> \r\n      <span class=\"pl-s\">\"portOccupancy\"<\/span>\r\n    <span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\r\n    <span class=\"pl-s\">\"portOccupancy\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n        <span class=\"pl-c1\">33000<\/span> <span class=\"pl-c\">\/\/ was 53000<\/span>\r\n    <span class=\"pl-kos\">]<\/span>\r\n  <span class=\"pl-kos\">}<\/span><\/pre>\n<\/div>\n<p dir=\"auto\">and<\/p>\n<div class=\"highlight highlight-source-js\" dir=\"auto\">\n<pre><span class=\"pl-kos\">{<\/span>\r\n  <span class=\"pl-s\">\"label\"<\/span>: <span class=\"pl-s\">\"Set up tab\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"type\"<\/span>: <span class=\"pl-s\">\"teamsfx\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"command\"<\/span>: <span class=\"pl-s\">\"debug-set-up-tab\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"args\"<\/span>: <span class=\"pl-kos\">{<\/span>\r\n    <span class=\"pl-s\">\"baseUrl\"<\/span>: <span class=\"pl-s\">\"https:\/\/localhost:33000\"<\/span> <span class=\"pl-c\">\/\/ was 53000<\/span>\r\n  <span class=\"pl-kos\">}<\/span>\r\n<span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">,<\/span><\/pre>\n<\/div>\n<p dir=\"auto\">And you can customize more by deleting\/commenting out lines, edit values, and add values in the JSON file.<\/p>\n<p dir=\"auto\">Some values are commented out by default, such as SSO setup, so you can enable some by uncommenting the lines too. Just customize as your app needs!<\/p>\n<h2 dir=\"auto\"><a id=\"user-content--customizing-tasksjson-for-bots\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/866a56939380a1160c10c52511ea387b#-customizing-tasksjson-for-bots\" aria-hidden=\"true\"><\/a>\ud83e\udd16 Customizing tasks.json for bots<\/h2>\n<p dir=\"auto\">Next, let&#8217;s take a look at a bot app. You can customize the tasks in the way I showed you for tab apps (such as the prerequisites checks), except there are some differences between tabs and bots.<\/p>\n<p dir=\"auto\">Let&#8217;s create a new command bot and see how the tasks are different.<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-5.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12164 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-5.png\" alt=\"Screenshot of Teams Toolkit in VS Code\" width=\"2052\" height=\"1362\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-5.png 2052w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-5-300x199.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-5-1024x680.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-5-768x510.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-5-1536x1020.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-5-2048x1359.png 2048w\" sizes=\"(max-width: 2052px) 100vw, 2052px\" \/><\/a><\/p>\n<p dir=\"auto\">Open the file at\u00a0<strong>.vscode<\/strong>\u00a0&gt;\u00a0<strong>tasks.json<\/strong>. You can see some tasks are different from the tab app. There are bot-specific tasks including, &#8220;Set up bot&#8221; and &#8220;Start local tunnel&#8221;:<\/p>\n<div class=\"highlight highlight-source-js\" dir=\"auto\">\n<pre><span class=\"pl-s\">\"tasks\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n  <span class=\"pl-kos\">{<\/span>\r\n    <span class=\"pl-s\">\"label\"<\/span>: <span class=\"pl-s\">\"Start Teams App Locally\"<\/span><span class=\"pl-kos\">,<\/span>\r\n    <span class=\"pl-s\">\"dependsOn\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n      <span class=\"pl-s\">\"Validate &amp; install prerequisites\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-s\">\"Install npm packages\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-s\">\"Start local tunnel\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-s\">\"Set up bot\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-s\">\"Build &amp; upload Teams manifest\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-s\">\"Start services\"<\/span>\r\n    <span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\r\n    <span class=\"pl-s\">\"dependsOrder\"<\/span>: <span class=\"pl-s\">\"sequence\"<\/span>\r\n  <span class=\"pl-kos\">}<\/span>\r\n<span class=\"pl-kos\">.<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-kos\">.<\/span><\/pre>\n<\/div>\n<p dir=\"auto\">When you run the debugger, you can see the process in the Output pane, in the same way you saw for the tab app.<\/p>\n<p dir=\"auto\">Customization can be done in the same manner, so if you want to skip certain tasks, you can comment the lines out.<\/p>\n<p dir=\"auto\">Next, let&#8217;s take a look at the bot-specific tasks and settings.<\/p>\n<h3 dir=\"auto\"><a id=\"user-content--changing-bot-service-port\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/866a56939380a1160c10c52511ea387b#-changing-bot-service-port\" aria-hidden=\"true\"><\/a>\ud83d\udef3 Changing bot service port<\/h3>\n<p dir=\"auto\">Bots use ports to run bot services, where tabs run web services.<\/p>\n<p dir=\"auto\">Just like the port for tabs you just learned, you can manually change the\u00a0<code>\"PortOccupancy\"<\/code>. Let&#8217;s change the bot service port to something different from the default, 3978:<\/p>\n<div class=\"highlight highlight-source-js\" dir=\"auto\">\n<pre><span class=\"pl-s\">\"args\"<\/span>: <span class=\"pl-kos\">{<\/span>\r\n  <span class=\"pl-s\">\"prerequisites\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n    ...\r\n  <span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"portOccupancy\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n    <span class=\"pl-c1\">4978<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-c\">\/\/ bot service port. By default it it 3978<\/span>\r\n    <span class=\"pl-c1\">9239<\/span> <span class=\"pl-c\">\/\/ bot inspector port for Node.js debugger<\/span>\r\n  <span class=\"pl-kos\">]<\/span>\r\n<span class=\"pl-kos\">}<\/span><\/pre>\n<\/div>\n<p dir=\"auto\">And you also need to change this in\u00a0<code>\"ngrokArgs\"<\/code>\u00a0setting, as well as in another file. You can search and replace the port number:<\/p>\n<p dir=\"auto\"><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-6.png\"><img decoding=\"async\" class=\"aligncenter wp-image-12163 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-6.png\" alt=\"Screenshot of Teams Toolkit in VS Code\" width=\"2052\" height=\"1362\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-6.png 2052w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-6-300x199.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-6-1024x680.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-6-768x510.png 768w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-6-1536x1020.png 1536w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2022\/11\/debugging-image-6-2048x1359.png 2048w\" sizes=\"(max-width: 2052px) 100vw, 2052px\" \/><\/a><\/p>\n<h3 dir=\"auto\"><a id=\"user-content--using-your-own-local-tunneling-service\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/866a56939380a1160c10c52511ea387b#-using-your-own-local-tunneling-service\" aria-hidden=\"true\"><\/a>\ud83c\udfd4 Using your own local tunneling service<\/h3>\n<p dir=\"auto\">By default, the local tunnel is created with a tool called,\u00a0<a href=\"https:\/\/ngrok.com\/\" rel=\"nofollow\">ngrok<\/a>, however, you can replace it with something else you prefer.<\/p>\n<p dir=\"auto\">To make the change, first, comment out the &#8220;Start local tunnel&#8221; from the tasks&#8217;\u00a0<code>\"dependsOn\"<\/code>:<\/p>\n<div class=\"highlight highlight-source-js\" dir=\"auto\">\n<pre><span class=\"pl-s\">\"tasks\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n  <span class=\"pl-kos\">{<\/span>\r\n    <span class=\"pl-s\">\"label\"<\/span>: <span class=\"pl-s\">\"Start Teams App Locally\"<\/span><span class=\"pl-kos\">,<\/span>\r\n    <span class=\"pl-s\">\"dependsOn\"<\/span>: <span class=\"pl-kos\">[<\/span>\r\n      <span class=\"pl-s\">\"Validate &amp; install prerequisites\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-s\">\"Install npm packages\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-c\">\/\/\"Start local tunnel\",<\/span>\r\n      <span class=\"pl-s\">\"Set up bot\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-s\">\"Build &amp; upload Teams manifest\"<\/span><span class=\"pl-kos\">,<\/span>\r\n      <span class=\"pl-s\">\"Start services\"<\/span>\r\n    <span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\r\n...<\/pre>\n<\/div>\n<p dir=\"auto\">Then, change the\u00a0<code>\"botMessagingEndPoint\"<\/code>\u00a0to your own tunnel URL at the bot setup task. I want to use my\u00a0<strong>contoso<\/strong>\u00a0service, so I am using the preferred path:<\/p>\n<div class=\"highlight highlight-source-js\" dir=\"auto\">\n<pre><span class=\"pl-kos\">{<\/span>\r\n  <span class=\"pl-s\">\"label\"<\/span>: <span class=\"pl-s\">\"Set up bot\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"type\"<\/span>: <span class=\"pl-s\">\"teamsfx\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"command\"<\/span>: <span class=\"pl-s\">\"debug-set-up-bot\"<\/span><span class=\"pl-kos\">,<\/span>\r\n  <span class=\"pl-s\">\"args\"<\/span>: <span class=\"pl-kos\">{<\/span>\r\n   <span class=\"pl-s\">\"botMessagingEndpoint\"<\/span>: <span class=\"pl-s\">\"https:\/\/contoso.com\/api\/message\"<\/span>\r\n  <span class=\"pl-kos\">}<\/span>\r\n<span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">,<\/span><\/pre>\n<\/div>\n<p dir=\"auto\"><em>Note: Contoso is a fictional service, in case you are not familiar with this Microsoft&#8217;s favorite fake company name<\/em>\u00a0\ud83d\ude09<\/p>\n<p dir=\"auto\">Run F5 and see the changes.<\/p>\n<hr \/>\n<p dir=\"auto\">I didn&#8217;t cover every possible task scenario here, but I hope you found the article helpful for debugging your Teams apps. Please don&#8217;t hesitate to drop your comments and feedback here.<\/p>\n<p dir=\"auto\">Mahalo and see you soon\u00a0\ud83d\udc4b<\/p>\n<h2 dir=\"auto\"><a id=\"user-content--learn-more\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/866a56939380a1160c10c52511ea387b#-learn-more\" aria-hidden=\"true\"><\/a>\ud83d\udcda Learn more<\/h2>\n<ul dir=\"auto\">\n<li>Visit our <a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-teams\">Microsoft Teams Dev Center<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/microsoftteams\/platform\/toolkit\/teams-toolkit-fundamentals?WT.mc_id=m365-79237-timura\" rel=\"nofollow\">Teams Toolkit documentation<\/a><\/li>\n<li>\n<p dir=\"auto\"><a href=\"https:\/\/docs.microsoft.com\/microsoftteams\/platform\/get-started\/get-started-overview\/?WT.mc_id=m365-79237-timura\" rel=\"nofollow\">Get started with Microsoft Teams platform<\/a><\/p>\n<\/li>\n<\/ul>\n<hr \/>\n<h2 dir=\"auto\"><a id=\"user-content--shoutout\" class=\"anchor\" href=\"https:\/\/gist.github.com\/girliemac\/866a56939380a1160c10c52511ea387b#-shoutout\" aria-hidden=\"true\"><\/a>\ud83d\udce2\u00a0Shoutout<\/h2>\n<p dir=\"auto\">Teams Toolkit Engineering team, especially Ji Dong\u00a0\ud83c\udf1f<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Teams Toolkit introduced some new features to improve your debugging experience, including Prerequisite Checker and Customizing Debug Settings. You can now customize the debugging experiences even more!<\/p>\n","protected":false},"author":77786,"featured_media":12189,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128],"tags":[23],"class_list":["post-12162","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","tag-teams-toolkit"],"acf":[],"blog_post_summary":"<p>Teams Toolkit introduced some new features to improve your debugging experience, including Prerequisite Checker and Customizing Debug Settings. You can now customize the debugging experiences even more!<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/12162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/77786"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=12162"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/12162\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/12189"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=12162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=12162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=12162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}