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

Philina

We will add an official way of doing it, but there's an undocumented way to do it that I can't post publicly but I'll send by email - [email protected]. – Carlotacarlotta

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 to see the Teams tray icon
• Click Teams tray 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.

Threadbare

On MAC, just clicking the icon in the tray 7 times and "Develop" menu shows up in menu bar. Ridiculous. – Denice

What does "Open Show hidden items" refer to? (EDIT: Ah, it's the Notification area disclosure arrow - I had that disabled so all icons are visible at all times) – Necrolatry

For those that still don't understand this answer: The Teams icon in the System Tray of Windows, click this icon 7 times. Then after right clicking it the options will show up. – Blatherskite

As of 2024 in the new Teams, this (hidden) functionality seems to be removed, follow this instead. – Leasehold

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.

Glassblowing

Answer 3

For linux users, the process is completely different. You need to click on Open button multiple times.

Once it's done, you'll see something like

Source

click: () => __awaiter(this, void 0, void 0, function* () {
    yield this.restoreWindow();
    // **Enable dev menu by clicking multiple times on Open for linux as electron does not report click events from tray icon**
    if (utility.isLinux() && this.trayAppIcon) {
        AppStateService.getInstance().trayDockMenuClickedDebugModeCheck();
        if (AppStateService.getInstance().isDebugModeEnabled() && !this.isDebugMenuSetUp) {
            this.buildContextMenu();
            this.trayAppIcon.setContextMenu(this.contextMenu);
        }
    }
})

Dishwater

This is perfect! Thank you. – Taneka

Answer 4

For those looking for a way to do it with the new teams:

1. Create a file named configuration.json file in this folder: %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 option, under which you'll find "Open Dev Tools"

Credit / Primary source from a comment on the Microsoft Teams blog

Javier

Can confirm this works as of May 7, 2024 – Christly

Answer 5

Right-click the Teams tray icon and choose Open DevTools. This is available only in the Developer build of Teams. See this Microsoft doc.

Pontiff