Debug web add-in for outlook in visual studio code

Question

I was following the tutorial for creating an advanced Outlook add-in here (Git the Gist)

The above is a node.js-app which uses Yeoman and Microsoft Office Add-in Project Generator. To simply start the add-in, you just type 'npm start' in your root project folder.

But: I want to debug the add-in in Visual Studio Code.

VS Code automatically creates a launch.json file when you want to debug a project. This file looks like this:

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

However, when I debug I get the following error:

Cannot launch program 'c:\ZTesting\outlooktest\bsconfig.json'; setting the outFiles attribute might help.

So are these outFiles truly the problem and - if so - what should they be? And - if not - what is the solution towards debugging a web add-in created with node.js, Yeoman and Microsoft Office Add-in Project Generator?

The bsconfig.json file looks like this:

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

score 2 · Answer 1 · answered Mar 09 '18 at 16:44

2

I did not find out how to debug the add-in above in Visual Studio Code. However it is possible to debug the add-in with the F12-developer-app from Windows 10.

You can find more information about the F12-app here: Debug add ins using F12 Developer-app from Windows 10

answered Mar 09 '18 at 16:44

Roeland Van Onckelen

41
4

It seems like F12-app can't open outlook add-ins. Nothing happened when I click on the add-ins in F12-app – Miao Aug 08 '18 at 05:21

score 1 · Answer 2 · answered Aug 08 '18 at 08:47

I have the same problem today. However, there is a tricky way to debug your outlook add-ins if WIN10 F12-app not able to open your html file.

you can use tbody.append to show any value when you debug your add-ins in outlook

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

score 0 · Answer 3 · answered Jul 17 '18 at 22:44

I had this same problem. The root cause is that the app does not actually run on the server. npm start actually runs a separate program, called webpack. You can see this by opening package.json. There should be a line like the following:

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

When you run npm start, it adds node_modules/.bin/ to the path before running that line. So this script is actually calling an executable called node_modules/.bin/webpack-dev-server. Webpack does not run any of the code in index.js. It "packs" the code, and broadcasts it over https to the client.

Since the app code only runs on the client, it can only be debugged on the client. The use of npm start makes it look like you're writing server code, but the add-in is actually running clientside.

Debug web add-in for outlook in visual studio code

3 Answers3