Wednesday, February 23, 2022

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.

No comments:

Post a Comment