How to open the developer tools in the new Microsoft Teams client

Microsoft Teams has recently rolled out a new Teams client on both Windows and MacOS, utilizing the Edge WebView2 as the host, replacing Electron from the Teams Classic. While this transition promises several advantages, it has also brought some challenges for developers who rely on inspecting and debugging their apps using browser developer tools. In this blog post, I’m showing how to open developer tools in the new Microsoft Teams client and discuss the current limitations and workarounds.

New Microsoft Teams client debug

Why Opening Developer Tools Matters

For developers working on applications integrated with Microsoft Teams, the ability to access developer tools is crucial. These tools allow developers to inspect HTML, CSS, and JavaScript code, monitor network requests, and debug issues within their applications. In the past, it was relatively straightforward to open developer tools in the Teams Classic client. However, with the introduction of the new Teams client, the old process is gone and developers were left with no alternatives.

Opening Developer Tools on MacOS

If you’re using the new Microsoft Teams client on MacOS and need to access developer tools for debugging purposes, you’re in luck. The process is relatively straightforward:

  1. First open the app you want to debug, once it loads right-click on the app or CTRL + Click to open the context menu
  2. In the context menu that appears after right-clicking, you should see an option labeled Inspect, click on this option
    New Microsoft Teams client debug
  3. This action will open the Edge developer tools, where you can inspect, debug, and analyze your app, just as you used to do with the Teams Classic client
    New Microsoft Teams client debug

Limitations on Windows

Unfortunately, the same workaround does not apply to the Windows version of the new Microsoft Teams client. As of now, there is no direct way to open developer tools in the Windows version.

New Microsoft Teams client debug

Hoping for a Solution

While the workaround for MacOS is helpful, it’s essential for Microsoft to address this limitation on the Windows platform as well. The ability to open developer tools is vital for debugging and maintaining the compatibility of applications with the new Teams client.

No comments yet

Leave a Reply

I've been working with Microsoft Technologies over the last ten years, mainly focused on creating collaboration and productivity solutions that drive the adoption of Microsoft Modern Workplace.

%d bloggers like this: