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.

Disadvantages of Azure table storage as NoSQL data storage

We used Azure table storage as NoSQL data storage for quite a time and got some experience which may be useful to share with community. First of all I want to say that I like Azure table storage: it is very simple to use (there are different SDKs), flexible with it's dynamic data schema for tables (although this must be a common thing in NoSQL world), fast (if you use it correctly and avoid full table scan scenarios) and last but not least - it is very cheap.

However at the same time it has number of cons which may be significant depending on amount of data you need to process and performance which you need to achieve. I collected them in the following table:

Cons	Comments
No LIKE operator	Can't perform search by sub string. Need to introduce complex data duplication patterns with different PartitionKey/RowKey for avoiding full table scan and performance issues
Only 2 system indexed columns (PartitionKey/RowKey) without possibility to add own indexes	Can't add custom indexed fields for improving queries performance
No full pagination support on API level	There is possibility to limit returned resultset size, but no possibility to skip number of rows
No native backup options	There are 3rd party (including open source) solutions which can be used but no built-in support from MS

Like I said I personally like Azure table storage. But due to these cons you may also consider other options for data storage e.g. Azure CosmosDB which is more expensive but also more powerful at the same time.

Problem with SPO app bar and Teams custom app with static tabs

If you use staticTabs in your custom MS Teams app (see Manifest schema for Microsoft Teams):

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
  "manifestVersion": "1.5",
  ...
  "staticTabs": [
    {
      "entityId": "Foo",
      "name": "Bar",
      "contentUrl": "...",
      "websiteUrl": "https://example.com",
      "scopes": [
        "personal"
      ]
    }
  ],
  ...
}

you may face with the following issue: when user clicks on app icon it correctly opens web page defined in staticsTabs. But if user clicks on that second time after web page has been loaded then SPO app bar callout will be shown with My sites/My news.

In order to fix it the following workaround can be used: identify that app on opened web page is running inside Teams (this article contains details how to do that: How to identify whether SPFx web part is running in web browser or in Teams client) and hide SPO app bar callouts via css in this case. This is how it can be done via TypeScript (for this example we assume that app is SPFx web part running on SPO page):

if (isAppRunningInsideTeams()) {
  const style = document.createElement("style");
  style.textContent = "#sp-appBar-callout { display:none !important; } ";
  const head = document.getElementsByTagName("head")[0];
  head.appendChild(style);
}

It will hide callouts only inside Teams where this problem happens and at the same time it will still work in SPO.