CODEWITHSUNDEEP
outlook-addinoffice-jsoutlook-web-addins
Ruckert Solutions
Ruckert Solutions

Reputation: 1301

Debugging Outlook Add-in Desktop

I'm currently developing an Add-in using yeoman and generator-office for Outlook to save an email and its attachments to another service.

Outlook Version: MS Office Professional Plus 2016 v.16.0.48.49.1000

I am able to sideload the add-in by going to File->Manage Add-ins->(Outlook webapp extensions page opens)->Add from file->Select my manifest.xml.

Then I run npm run start and I get:

App type: desktop
Enabled debugging for add-in 17717569-bd61-4c6a-b99d-ca55924a2916. Debug method: 0
Starting the dev server... (webpack-dev-server --mode development)
The dev server is running on port 3000. Process id: 9660
Sideloading the Office Add-in...
Error: Unable to start debugging.
Error: Unable to sideload the Office Add-in.
Error: Sideload is not supported.

The add-in is sideloaded and I'm able to use it, but without being able to attach a debugger I'm blocked.

Any known solutions for this?

Edit: I followed the guide from https://learn.microsoft.com/en-us/outlook/add-ins/quick-start.

@MS Team If it is not possible to add a debugger using Yeoman, is it possible using the Visual Studio approach ?

Upvotes: 9

Views: 7626

Answers (2)

Jarek-JT
Jarek-JT

Reputation: 23

For Visual Studio Code and Windows 10 Version 1903 or higher there is an option to debug using Microsoft Office Add-in Debugger Extension.

To install it:

  1. In VSC -> Extensions -> Search for Microsoft Office Add-in Debugger Extension and install it
  2. In the .vscode/launch.json add the following code to the configurations section:
{
  "type": "office-addin",
  "request": "attach",
  "name": "Attach to Office Add-ins",
  "port": 9222,
  "trace": "verbose",
  "url": "https://localhost:3000/taskpane.html?_host_Info=HOST$Win32$16.01$en-US$$$$0",
  "webRoot": "${workspaceFolder}",
  "timeout": 45000
}
  1. In the section of JSON you just copied, find the "url" section. In this URL, you will need to replace the uppercase HOST text with the application that is hosting your Office add-in. For example, if your Office add-in is for Excel, your URL value would be "https://localhost:3000/taskpane.html?_host_Info=Excel$Win32$16.01$en-US$$$$0".

Source: https://learn.microsoft.com/en-us/office/dev/add-ins/testing/debug-with-vs-extension

Upvotes: 2

adamk
adamk

Reputation: 124

You can run the dev server (npm run dev-server) rather than use npm start because Outlook does not support sideloading. Once the dev server is running, you can load the add-in using the steps you mentioned. Once the add-in is running in Outlook, you can use the browser dev tools to debug it.

If you are on Windows 10 Version 1903 or later, it should be using the Edge WebView, and you can use the Edge DevTools Preview from the Windows 10 Store to debug it. For previous version of Windows, where the Internet Explorer WebView is being used, the F12 dev tools are used to debug.

Upvotes: 8

Related Questions