Outlook Office Add-in (Desktop) does not have devtools

Question

Tried running a localhost https outlook office add-in in vscode, which is automatically sideloaded. It functions just right when the dialog appears on-send. However, when f12 is pressed, devtools does not appear.

Tried the following:

• Run debug mode in VSCode, does not attach to outlook addin. When run with msedge.exe --remote-debugging-port=9229 (port defined in launch.json), debugger attaches to the newly opened empty edge window instead of the addin.
• Tried Windows built-in IEChooser (F12), but add-in does not appear in the list of target pages to debug (possible reason is that IEChooser is only for apps that run on Internet Explorer 11)
• When the dialog displays, pressing f12 does not trigger anything, right-click seems to be disabled
• Set JS_DEBUG Microsoft.Win32WebViewHost app package in powershell, prompts success but nothing seemed to change.

Version Details:
Windows 10 Pro 64bit 20H2 19042.1165
Microsoft® Outlook® for Microsoft 365 MSO (16.0.14228.20216) 64bit
MS Edge 92.0.902.84 64bit
VSCode 1.59.1

UPDATED please see edits above

Kraigkrait

Could you specify the host version? – Battledore

@EugeneAstafiev I have updated the post for the versions. – Kraigkrait

Answer 1

Make sure the same browser is used on both machines. The Browsers used by Office Add-ins article lists platforms and Office versions with corresponding browsers used for running web add-ins. Depending on the browser used in Outlook you may choose a strategy for debugging the add-in. If you are on Windows 10 Version 1903 or later, it should be using the Edge WebView, and you can use the Edge DevTools to debug it. For previous version of Windows, where the Internet Explorer WebView is being used, the F12 dev tools are used to debug.

When the add-in is running in Microsoft Edge, UI-less code will not be able to attach to a debugger by default. UI-less code is any code running while the task pane is not visible, such as add-in commands or event handlers such as ItemSend. To enable debugging, you need to run Windows PowerShell commands described in the Debug add-ins using developer tools on Windows 10 article.

Also you may find the Debug add-ins on Windows using Edge Chromium WebView2 article helpful.

Battledore

Thanks for the references. I have checked the Browsers used by Office Add-ins article and confirmed that I'm using Microsoft Edge2 with WebView2 Chromium-based). By Edge DevTools do you mean the Edge Devtools Preview? microsoft.com/en-us/p/microsoft-edge-devtools-preview/… What I don't understand is why the devtools does not appear when I press f12 inside the dialog (even right click does not work) – Kraigkrait

Yes, that is the correct Edge DevTools debugger. However, since you are using WebView2, that debugger does not apply. As Eugene mentioned, the debugger is only available when the taskpane is visible. If the taskpane is open, you should see an option when you right click on the taskpane to "Inspect". This will open the debugger in WebView2. If you are in the context of an OnSend add-in, the debugger will not be available. – Gaynor

How does that work on Mac where the Browser lists state it uses Safari with WKWebView? – Arvo