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

By João Ferreira Oct 6, 2023 Development, Microsoft Teams 0 Comments

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.

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
   
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
   

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.

To enable the developer tools on the new Microsoft Teams client using Windows, follow this article.

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.