(How) can I open the dev tools in the Microsoft Teams desktop client?

Question

I thought I had recently seen a developer open the dev tools from inside the Microsoft Teams desktop client (for Windows), but I can't easily replicate that.

Shortcuts like

Strg+Shift+I, Strg+Alt+I, Shift+Alt+I,

F12, Strg+F12, Shift+F12, Strg+Shift+F12, Strg+Alt+F12

don't work.

The reason I am not just using the browser version is that the same app behaves differently in browser and desktop version which makes these dev tools kind of necessary for debugging.

Answer 1

Install teams Desktop. Official Link given below,

https://products.office.com/en-in/microsoft-teams/download-app

If Dev mode is enabled, Right-click the Teams tray icon and choose Open Dev Tools.

Else, Enable Dev Mode by following below steps,

• Open Show hidden items
• Click Teams icon 7 times. (Normal left click)
• Now right click the Teams icon and you'll see all Dev options.

Update:

Now a new menu called DevTools opens as shown in image. Previously lot of dev options will show directly.

Answer 2

Here's the piece of code that adds the developer menus to microsoft teams:

trayDockMenuClickedDebugModeCheck() {
    if (this.isDebugModeEnabled() || appConfig.getInstance().getSetting(constants.settings.debugMenuDisabled)) {
        return;
    }
    this.debugMenuClickCount++;
    if (this.debugModeClickTimer) {
        clearTimeout(this.debugModeClickTimer);
        this.debugModeClickTimer = null;
    }
    if (this.debugMenuClickCount >= 4) {
        this.loggingService.logInfo('Enabling debug mode. Click count:' + this.debugMenuClickCount);
        this.debugModeEnabled = true;
        this.eventingService.emit(constants.events.debug.debugModeToggle);
    }
    else {
        this.debugModeClickTimer = setTimeout(() => {
            this.debugMenuClickCount = 0;
        }, constants.timeInMiliseconds.second * 30);
    }
}

Basically you have to click fast 4 times or more in the tray icon.