It looks like my bounty is about to expire, with nary an answer.
If anyone can answer this in future, I will award a bounty. If I find out how, I will post an answer.
I am struggling to even begin developing my first Outlook web add-in.
Ideally, I want to add an icon to the main toolbar and, when clicked, I want it to pop up a dialog (which will be an HTML page running an existing Angular JS app).
I already have the icon on the main toolbar (desktop client only, as outlook.office.com does not have a toolbar, and it looks like Office.context.ui.displayDialogAsync() should pop up an HTML page as a dialog.
I see no pop-up when clicking the icon, but am stymied as to how to debug such an add-in from the Outlook desktop client. Can anyone tell me how?
I was thinking of switching to web based email for development, but
1) I won't have a main toolbar, and would have to temporarily move my icon, and
2), I tried that before, but couldn't the output of console.log() or alert(), even as the first statement of my Angular JS controller. Is there some other/better way to debug a web-based app?
I have Googled, but there is a paucity of information. How can I develop such an add-in and debug it?
[Update] See my answer below. It's simple
Microsoft provides detailed documentation regarding many things and many other sources often reference them, although you have probably been through these I'm just linking them here in case.
If you are using an attached debugger from the task pane:
https://learn.microsoft.com/en-us/office/dev/add-ins/testing/attach-debugger-from-task-pane
If you are using F12 developer tools on Windows 10: