如何调试Outlook Web插件？

Question

如何调试Outlook Web插件？

debuggingoutlookoutlook-addin

4

挂单优惠

看起来我的赏金即将到期，却没有一个答案。

如果未来有人能够回答这个问题，我会授予一份赏金。如果我找出了如何解决它，我会发布一个答案。

我甚至还在苦苦挣扎着如何开发我的第一个Outlook Web插件。

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

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

当单击图标时，我看不到任何弹出窗口，但我不知道如何从Outlook桌面客户端调试这样的插件。有谁能告诉我吗？

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

1）我没有主工具栏，必须暂时移动我的图标，

2）我以前试过，但无法获取console.log()或alert()的输出，即使它是我的Angular JS控制器的第一个语句。有没有其他/更好的调试Web应用程序的方法？

我已经通过Google搜索过了，但是信息很少。如何开发这样一个插件并进行调试？

[更新] 请看下面我的答案。这很简单。

- Mawg says reinstate Monica

1

为什么要踩我？如果你知道答案，请帮忙——这就是这个网站的目的。对你来说可能很简单，但我已经在Google上搜索并断断续续地尝试了几个月。 - Mawg says reinstate Monica

5个回答

2

微软提供了许多关于各种事项的详细文档，许多其他来源也经常引用这些文档，尽管您可能已经阅读过这些文档，但我在这里提供链接以备参考。

如果您正在使用任务窗格中的 附加调试器： https://learn.microsoft.com/en-us/office/dev/add-ins/testing/attach-debugger-from-task-pane 如果您正在使用 Windows 10 的 F12 开发人员工具： https://learn.microsoft.com/en-us/office/dev/add-ins/testing/debug-add-ins-using-f12-developer-tools-on-windows-10

- wareisjared

1

如果您已经彻底阅读了这些内容，我将从您的帖子中删除它们；或者您可以选择保留它们以帮助其他遇到类似问题的人。这取决于您自己的决定。 - wareisjared

1

非常感谢你，Jared。我以为我已经看过所有的文档了，但这似乎是新的 - 而且非常有用。 - Mawg says reinstate Monica

如果我能弄清如何提高赏金，我就会这么做 :-) - Mawg says reinstate Monica

1

@Mawg 没问题，非常高兴能够帮助到你。 - wareisjared

最终，我无法让这两个与Outlook配合工作 :-( - Mawg says reinstate Monica

2

最初的回答：看起来F12开发工具也可以本地运行，我在Windows 10虚拟机上需要通过命令行手动启动。

** 32位系统： C:\Windows\System32\F12\IEChooser.exe

** 64位系统： C:\Windows\SysWOW64\F12\IEChooser.exe

注：F12开发工具为一款基于浏览器的调试工具。如果你需要在Windows 10系统下使用该工具，可通过上述命令行方式进行启动。

- nrako

它也适用于Outlook 365吗？（我不确定他们是否仍在内部运行IE，也许是Edge？） - Nathan B

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;
}

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

将此代码放入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查询字符串中来记录错误，如下所示：

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错误，可能会导致更多问题？

- user16457328

哇，谢谢。我会找出我的旧项目并尝试这个（+1）。 - Mawg says reinstate Monica

这里有100分的奖励，感谢你的帮助。对于一个新手来说，你已经是一个很好的帮手了。我希望我们将来会经常见到你在这里。 - Mawg says reinstate Monica

1

我相当确定现在已经不可能了——微软已经从"EdgeHtml"迁移到"EdgeChrome"，因此所有之前可用的Office Add-Ins调试工具都不再起作用。

项目github页面上未解决的问题表明它从2021年5月左右就已经出了问题：https://github.com/OfficeDev/vscode-debugger-extension-for-office-addins/issues 讽刺的是，鉴于AppSource的硬性要求，我们必须保持所有自己的应用程序维护，但微软似乎没有在维护他们的工具。

- user16457328

非常感谢您提供的信息（+1）。我已经放弃了这个项目，但是如果我能够调试它，我很想重新开始。如果您知道如何解决问题，请在此处发布答案，我将奖励您额外的积分。 - Mawg says reinstate Monica

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mawg says reinstate Monica · Accepted Answer

尽管我接受了Jared的答案，但最终我实际上无法让它起作用。然而，我找到了一个解决方案，并在此发布以帮助他人。这是非常简单的；我使用Office 365 Outlok，而不是桌面版。只需按F12打开浏览器的开发者控制台，切换到“调试器”选项卡，在我的情况下查找localhost，那里就有我的文件，我可以像处理任何其他Web应用程序一样进行调试。我不知道自己为什么会被困扰了几周 - 只是一个盲点，我想。希望这能帮助到某个人 :-)