Question

常规报价

我的赏金似乎即将到期，没有答案。

如果将来有人可以回答这个问题，我将颁发赏金。如果我找到方法，我将发布答案。

我甚至在努力开发我的第一个Outlook Web加载项。

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

我已经在主工具栏上有了该图标（仅台式机客户端，因为outlook.office.com没有工具栏，并且Office.context.ui.displayDialogAsync()应该弹出HTML页面作为对话框。

单击该图标时，我看不到任何弹出窗口，但是在如何从Outlook桌面客户端调试此类加载项方面遇到了麻烦。谁能告诉我如何？

我当时正在考虑改用基于Web的电子邮件进行开发，但是

1）我没有主工具栏，因此必须临时移动我的图标，然后

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

我已经搜索过Google，但是信息很少。如何开发这样的加载项并进行调试？

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

Answer 1

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 2

看起来像F12 development tools本身将正常工作。我在Windows 10虚拟机上，需要通过命令行手动启动。

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

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

Answer 3

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

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

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

Answer 4

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

如果您正在开发任务面板加载项，请将 a 放在您的任务面板中，并将您的调试输出写入该面板：-

把它放在 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;
}

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

把它放在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 错误，这可能会导致更多问题？）

Answer 5

尽管接受了贾里德（Jared）的回答，但最终还是无法使它真正起作用。

但是，我确实找到了解决方案，并将其发布在这里以帮助他人。

它非常简单。我使用的是Office 365 Outlok，而不是台式机版本。

只需按F12进入浏览器的开发人员控制台，切换到“调试器”选项卡，查找-就我而言-localhost，并找到我的文件，可以像使用任何其他Web应用程序一样对其进行调试。

我不知道为什么我会为此困扰数周-我想这只是一个盲点。希望这对某人有帮助：-）

如何调试Outlook Web加载项？

常规报价

5 个答案: