Dev Tools for Microsoft Teams tabs

When Teams is running in a browser, it's easy to access the browser's Dev Tools. To access Dev Tools in Windows press F12 and in macOS press Command-Option-I. Dev Tools gives you access to:

  • View console logs.
  • View or modify HTML, CSS, and network requests during runtime.
  • Add breakpoints to your JavaScript code and perform interactive debugging.

Note

Dev Tools is only available for desktop and Android clients. To access Dev Tools, you must enable Public preview.

Access Dev Tools on desktop

While the web version and the desktop version of Teams are almost same, there are some differences with authentication. Sometimes the only way to figure out what's going on is to use Dev Tools. To use Dev Tools in the desktop client, follow these steps:

  1. Enable Public preview.

  2. Open a tab to inspect with Dev Tools.

  3. Open Dev Tools in one of the following ways:

    • On Windows: Open the desktop tray and right-click to select the Microsoft Teams icon. Select Open Dev Tools:

      Screenshot shows the option to open Dev Tools from Windows desktop.

    • On macOS: Select Open Dev Tools:

      Screenshot shows the option to open Dev Tools from macOS dock.

    The following example shows DevTools: Screenshot shows the Tab and DevTools.

Access DevTools from Android device

You can enable DevTools in the Teams Android client. To enable DevTools, follow these steps:

  1. DevTools for Android is available only on the beta version of Teams app. To join the beta version of Teams app, follow the instructions listed in Get beta versions of apps.

    Screenshot shows the option to join the beta.

  2. Enable Public preview.

  3. Connect your device to your desktop computer, and set up your Android device for remote debugging.

  4. In your Chrome browser, open chrome://inspect/#devices.

  5. Select inspect under the tab you wish to debug, as in the following image:

    Screenshot shows the Android DevTools.

See also