DevTools for Microsoft Teams tabs

When Teams is running in a browser, it’s easy to access the browser's DevTools: F12 (on Windows) or Command-Option-I (on MacOS). The DevTools gives you access to:

  1. View console logs.
  2. View/modify html, css, and network requests during runtime.
  3. Add breakpoints to your JavaScript code, and perform interactive debugging.

The feature is only available in desktop and Android clients after Developer Preview has been enabled. See How do I enable Developer Preview for more information.

Accessing DevTools in the Desktop

While the web version of Teams and the desktop version of teams are almost exactly the same, there are some differences, particularly with respect to authentication. Sometimes the only way to figure out what’s going on is to use the DevTools. Here's how to get to them from the Teams desktop client. To use DevTools in the desktop client:

  1. Make sure you have enabled developer preview
  2. Open up a tab so you have something to inspect with the DevTools.
  3. Open the DevTools
    • On Windows, you open DevTools via the Microsoft Teams icon in the desktop tray:

Right-click to open DevTools

* On MacOS, click on the Microsoft Teams icon in the Dock.

Here’s what a sample tab looks like with the DevTools open and an element selected:

Tab and DevTools

Accessing DevTools from an Android client

You can also enable the DevTools from the Teams Android client. To do so:

  1. Make sure you have enabled developer preview
  2. Connect your device to your desktop computer, and setup your Android device for remote debugging
  3. In your Chrome browser, open chrome://inspect/#devices.
  4. Click inspect below the tab you wish to debug, as in the screenshot below.

Android DevTools