19

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.

Joshua
  • 303
  • 1
  • 2
  • 5
  • 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 - billbl@microsoft.com. – Bill Bliss - MSFT Jun 06 '18 at 01:38

4 Answers4

39

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.

After clicking

Gokul Thiagarajan
  • 800
  • 6
  • 17
  • 16
    On MAC, just clicking the icon in the tray 7 times and "Develop" menu shows up in menu bar. Ridiculous. – Justin Jan 30 '20 at 23:07
  • 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) – Dai Jul 03 '20 at 05:13
  • 4
    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. – goamn May 03 '21 at 13:14
11

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.

Bruno Warmling
  • 362
  • 4
  • 14
5

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 this

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);
        }
    }
})
Krishna
  • 6,107
  • 2
  • 40
  • 43
3

Teams tray icon context menu

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

hlmtre
  • 28
  • 4
Sam Rueby
  • 5,914
  • 6
  • 36
  • 52