How to enable DevTools for Microsoft Teams desktop client

If you develop apps for MS Teams (here we will use SPFx app running inside Teams) at some point you will most probably face with the need of debugging it in Teams desktop client. Of course in some scenarios you may use web client https://teams.microsoft.com/ and use regular browser developer tools (F12) for debugging however it is not always possible because some bugs may be reproduced only in desktop client. In this case you will need to find a way to debug them in desktop client.

The most simple approach is to use good old window.alert() across the code. Without browser console accessible in desktop client it will help to understand what happens in the code execution flow. But if you had experience with that (i.e. if you are old enough when everybody used it for debugging :) ) you probably know that this is quite boring and time consuming approach.

More powerful way to debug apps in Teams desktop client is to use DevTools for Microsoft Teams. For enabling it we first need to switch Teams client to Developer preview mode. It can be done from 3 dots in the top right corner > About menu:

After that you will get nice looking "P" (preview) icon added to your logo in top right corner of the window :) Also you will be able to open DevTools window by right click on MS Teams icon in System tray:

It will open DevTools table similar to those used in browsers (with console tab, network tab, etc):

which will greatly simplify debugging of the apps in Teams desktop client.

Remote debugging of Azure functions in Visual Studio

When developing for Azure you should definitely take a look on Visual Studio’s Cloud Explorer (Views > Cloud Explorer) as it has features which are missing in basic Azure portal. E.g. when working with Notification hubs it allows to manage existing subscriptions for push notifications (view and delete if needed). There is one more useful feature if you develop Azure functions which I explored recently: remote debugging. It allows you to attach debugger to remote process of your Azure function app running in Azure and debug it in your Visual Studio.

In order to do that open Cloud explorer > choose subscription > App services > right click on Azure function app > Attach debugger:

If it will show error:

System.Runtime.InteropServices.COMException (0x89710023): Unable to connect to the Microsoft Visual Studio Remote Debugger named '{tenant}.azurewebsites.net'.  The Visual Studio 2017 Remote Debugger (MSVSMON.EXE) does not appear to be running on the remote computer. This may be because a firewall is preventing communication to the remote computer. Please see Help for assistance on configuring remote debugging.

ensure that port 4022 which is used by remote debugger is opened in firewall. After that you should be able to debug remote Azure functions running on Azure.

Fix No source available problem when debug ASP.Net internal code

Sometimes you need to debug internals of ASP.Net. It helps to understand some important aspects of functioning of the framework and improves the understanding of how it works in general. Here is the good article which explains how to configure Visual Studio for debugging .Net code (which of course includes ASP.Net code): Configuring Visual Studio to Debug .NET Framework Source Code. This article was written for VS2008, in VS2010 and VS2012 steps are almost the same, bug there are several improvements. First of all there is new “Enable .NET Framework source stepping” setting:

This msdn article How to: Debug .NET Framework Source says that we need to check it in order to be able to step into the .Net code. However on practice I was able to debug .Net code even with having it unchecked.

Another improvement is having preconfigured Microsoft Symbols Servers option in Tools > Debugging > Symbols:

So now you don’t need to add and configure it manually.

Ok, so you did all described steps, tried to debug your ASP.Net application, set breakpoint e.g. in Page_Load method of your page and in Call Stack window can see that symbols for whole stack are loaded properly:

Also if you will check Symbol Load Information from the context menu:

you will see that symbols are successfully loaded:

However if you will try to double click on any row in Call Stack window you may see the message that source code is unavailable:

It may be confusing because you did everything according to instructions which you found in many blog posts and forums. However there is one more important thing which you should do. In order to debug ASP.Net code use real IIS web server in the project settings instead of Visual Studio Development Server:

After you will change project settings and click on some .Net internal call from Call Stack you will see the .Net source code:

Hope that this information will help you during the debugging.