如何调试 Outlook Web 加载项？

Question

长期报价

看来我的赏金快要到期了，没有答案。

如果以后有人能回答这个问题，我将奖励赏金。如果我知道如何，我会发布一个答案。

---

我什至在开始开发我的第一个 Outlook 网络插件时都在努力。

理想情况下，我想在主工具栏上添加一个图标，并在单击时弹出一个对话框（这将是一个运行现有 Angular JS 应用程序的 HTML 页面）。

我已经在主工具栏上有图标（仅限桌面客户端，因为 outlook.office.com 没有工具栏，看起来Office.context.ui.displayDialogAsync() 应该弹出一个 HTML 页面作为对话框。

单击图标时我看不到弹出窗口，但不知道如何从 Outlook 桌面客户端调试此类加载项。谁能告诉我怎么做？

我正在考虑切换到基于 Web 的电子邮件进行开发，但是

1) 我将没有主工具栏，并且必须暂时移动我的图标，并且

2)，我之前尝试过，但无法输出console.log() 或alert()，即使是我的Angular JS 控制器的第一条语句。是否有其他/更好的方法来调试基于 Web 的应用程序？

我用谷歌搜索过，但信息很少。如何开发和调试这样的插件？

---

[更新] 请参阅下面的答案。很简单

Answer 1

尽管接受了 Jared 的回答，但我最终无法真正让它发挥作用。

不过，我确实找到了解决方案，并在此处发布以帮助其他人。

这非常简单；我使用Office 365 Outlok，而不是桌面版。

只需按 F12 进入浏览器的开发者控制台，切换到“调试器”选项卡，查找 - 就我而言 - localhost，然后就有我的文件，我可以像使用任何其他网络应用程序一样调试这些文件。

我不知道为什么我被困了几个星期——我想这只是一个盲点。希望这可以帮助某人:-)

Answer 2

Microsoft 提供了有关许多事物的详细文档，并且许多其他来源经常引用它们，尽管您可能已经阅读过这些，我只是将它们链接在这里以防万一。

如果您使用的是任务窗格中的附加调试器：

https://docs.microsoft.com/en-us/office/dev/add-ins/testing/attach-debugger-from-task-pane

如果您在 Windows 10 上使用 F12 开发人员工具：

https://docs.microsoft.com/en-us/office/dev/add-ins/testing/debug-add-ins-using-f12-developer-tools-on-windows-10

Answer 3

看起来F12 development tools 也可以在本地工作。我在 Windows 10 虚拟机上，需要通过命令行手动启动。

** 对于 32 位： C:\Windows\System32\F12\IEChooser.exe

** 对于 64 位： C:\Windows\SysWOW64\F12\IEChooser.exe

Answer 4

我有理由确定这现在是不可能的 - 微软已经从“EdgeHtml”迁移到“EdgeChrome”，所以今年之前用于 Office 加载项的所有调试工具都不再起作用。

项目 github 页面上未解决的问题表明它自 2021 年 5 月左右就已被破坏：https://github.com/OfficeDev/vscode-debugger-extension-for-office-addins/issues

具有讽刺意味的是，MS 似乎没有维护他们的工具，因为 AppSource 的硬性要求是我们保持所有我们的应用程序维护 :-)

Answer 5

对于任何无法进行常规调试的人，无论出于何种原因，这里有 2 个我正在使用的解决方法，到目前为止至少“可以”。

1. 如果您正在开发任务面板插件，请在您的任务面板中放置一个，然后将您的调试输出写入该面板：-

把这个放在taskpane.html中：-

    <textarea id="out" rows=10 cols=46>debug info here</textarea>

并将其放入 taskpane.js 中：-

try {
  // your code
} catch (error) {
  document.getElementById("out").value += "error:" + error;
}

1. 对于您正在执行的任何其他（包括任务窗格）操作，您还可以将调试数据发送到远程服务器，然后在该远程服务器上“跟踪”输出：-

把这个放在commands.js中：-

function eLog(yourUrl){
  var Httpreq = new XMLHttpRequest();
  Httpreq.open("GET",yourUrl,false);//nb: Access-Control-Allow-Origin: *
  Httpreq.send(null);
  return Httpreq.responseText;
}

然后您可以通过将日志记录文本添加到 URL GET query_string 中来记录您的错误，如下所示：

try {
  // your code
} catch (error) {
  eLog("https://www.yourwebsite.com/yourlogscript.cgi?yournotes=here&error="+ JSON.stringify(error)) ;
}

您需要将https://www.yourwebsite.com/ 添加到您的 manifest.xml 中（并且必须是 SSL）：

<AppDomains>
  <AppDomain>https://www.yourwebsite.com</AppDomain>
</AppDomains>

您的网站应该返回 CORS 标头：-

Access-Control-Allow-Origin: *

（您不必 - 您的服务器无论如何都会获取数据，但如果没有该标头，它会引发一个可能导致更多问题的 JS 错误？）