New Microsoft Teams Desktop Client Dev Tools

Question

I have switched to the new Teams client and found some issues with a custom app that I've built. It still works in the old desktop client and the web client.

There doesn't seem to be an obvious way to launch the devtools in the new version, does anyone have any tips or tricks for this?

Answer 1

There is an update in the comments of the New Teams Desktop GA announcement here

https://techcommunity.microsoft.com/t5/microsoft-teams-blog/announcing-general-availability-of-the-new-microsoft-teams-app/bc-p/3947306/highlight/true#M13303

To enable engineering tool in New Teams client:

1. Create a configuration.json file under: %localappdata%\Packages\MSTeams_8wekyb3d8bbwe\LocalCache\Microsoft\MSTeams
2. In the file add: {"core/devMenuEnabled": true}
3. Restart the client.
4. Right click the Teams client icon in system tray to see the Engineering Tools entry point.

UPDATE Feb 24:

It is now a little trickier to get to individual instances of the Edge dev tools. With the current version 24004.1307.2669.7070 this works for me.

From right click on the system tray, Engineering Tools > Clouds > Commercial > edge://inspect

This will open a new window like so.

From the Pages tab you can open up the various browser frames as necessary

Answer 2

While waiting for the official method of opening the devtools window, you can try this:

Set the environment variable WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS to --auto-open-devtools-for-tabs. When you restart the program (in this case, the Teams client), it should automatically open DevTools.

See also:

• Debug WebView2 apps with Microsoft Edge DevTools
• WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS