在 Visual Studio 代码中为 Outlook 调试 Web 加载项答案

【问题标题】：Debug web add-in for outlook in visual studio code在 Visual Studio 代码中为 Outlook 调试 Web 加载项
【发布时间】：2018-08-08 16:47:18
【问题描述】：

我正在按照教程创建高级 Outlook 插件here (Git the Gist)

以上是一个 node.js-应用程序，它使用 Yeoman 和 Microsoft Office Add-in Project Generator。要简单地启动加载项，只需在根项目文件夹中键入“npm start”即可。

但是：我想在 Visual Studio Code 中调试插件。

当您要调试项目时，VS Code 会自动创建一个launch.json 文件。该文件如下所示：

 "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}\\bsconfig.json"
        }
    ]

但是，当我调试时，我收到以下错误：

无法启动程序'c:\ZTesting\outlooktest\bsconfig.json'；环境 outFiles 属性可能会有所帮助。

那么这些outFiles 真的是问题吗？如果是，它们应该是什么？并且 - 如果不是 - 调试使用 node.js、Yeoman 和 Microsoft Office Add-in Project Generator 创建的 Web 插件的解决方案是什么？强>?

bsconfig.json 文件如下所示：

{
    "ui": {
        "port": 3000
    },
    "server": {
        "routes": {
            "/node_modules": "node_modules"
        }
    },
    "https": {
        "key": "./certs/server.key",
        "cert": "./certs/server.crt"
    },
    "watch": true,
    "files": "*.*"
}

【问题讨论】：

标签： node.js visual-studio-code outlook-addin bsconfig

【解决方案1】：

我没有找到如何在 Visual Studio Code 中调试上述加载项。但是，可以使用 Windows 10 中的 F12-developer-app 调试加载项。

您可以在此处找到有关 F12 应用程序的更多信息： Debug add ins using F12 Developer-app from Windows 10

【讨论】：

F12-app好像打不开outlook插件。当我点击 F12-app 中的加载项时没有任何反应

【解决方案2】：

我今天也有同样的问题。但是，如果 WIN10 F12-app 无法打开您的 html 文件，则有一种棘手的方法可以调试您的 Outlook 加载项。

在 Outlook 中调试加载项时，您可以使用 tbody.append 显示任何值

var tbody = $('.prop-table');
tbody.append(makeTableRow("asyncResult: ", item));
function makeTableRow(name, value) {
    return $("<tr><td><strong>" + name +
        "</strong></td><td class=\"prop-val\"><code>" +
        value + "</code></td></tr>");
}

【讨论】：

【解决方案3】：

我遇到了同样的问题。根本原因是应用程序实际上并未在服务器上运行。 npm start 实际上运行一个单独的程序，称为 webpack。您可以通过打开 package.json 看到这一点。应该有如下一行：

"start": "webpack-dev-server --mode development --https --key ./certs/server.key --cert ./certs/server.crt --cacert ./certs/ca.crt --port 3000"

当您在运行该行之前运行npm start、it adds node_modules/.bin/ to the path。所以这个脚本实际上是在调用一个名为 node_modules/.bin/webpack-dev-server 的可执行文件。 Webpack 不运行 index.js 中的任何代码。它“打包”代码，并通过 https 将其广播到客户端。

由于应用代码只在客户端运行，所以只能在客户端调试。 npm start 的使用使您看起来像是在编写服务器代码，但加载项实际上是在客户端运行。

【讨论】：