How to debug an Outlook web add-in?

Question

Standing offer

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

Answer 1

Despite accepting Jared's answer, I couldn't get actually get it to work in the end.

I did, however, find a solution, and post it here to help others.

It was blindingly simple; I use Office 365 Outlok, rather than the desktop version.

Just press F12 for the browser's developer console, switch to the "Debugger" tab, look for - in my case - localhost, and there are my files, which I can debug as with any other web app.

I don't know why I was stuck for weeks with this - just a blind spot, I guess. Hope this helps someone :-)