7

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 ?

Lumpenstein
  • 1,250
  • 1
  • 10
  • 27

2 Answers2

7

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.

Sebastian
  • 1,321
  • 9
  • 21
adamk
  • 114
  • 1
  • 1
    I'm on version 1703. I finally figured it out thanks a lot. I was mainly confused because when the doc is speaking about the 'F12 dev tools' I thought it meant the Dev tools in Edge/IE, I didn't know that there is a standalone version hidden in windows/system32. Thanks! – Lumpenstein Oct 23 '19 at 07:09
  • Do you know by any change a way to debug the function file ? With the devTools I'm only able to debug the dialog :) – Lumpenstein Oct 24 '19 at 06:47
  • How do you reload the addin in `F12`? When I reload in MSWord I miss the startup console logs. – João Pimentel Ferreira Aug 26 '20 at 18:42
  • @adamk, I tried this way, and npm server is running. But the installed addins are just disabled. How to enable them? I added a key to DoNotDisableAddinList, but not working as well. – hotcakedev Mar 12 '21 at 21:53
  • For anyone wondering about the standalone version in system32 that Lumpenstein mentioned: You can start the F12 tools manually by opening C:\Windows\System32\F12\IEChooser.exe and then selecting your running plugin. – T S Apr 29 '22 at 10:16
2

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

Jarek
  • 23
  • 5
  • 1
    Link-only answers are discouraged on Stack Overflow, as they are rendered useless if the link stops working or the content significantly changes. You should [edit] your answer to include the most important information that's relevant to the question in the answer itself. Answers that are little more than links to an external site may end up being [deleted](https://stackoverflow.com/help/deleted-answers) – Hoppeduppeanut Aug 28 '20 at 03:34
  • Post edited to provide minimum steps needed to install Ms Office Add-in Debugger Extension. – Jarek Aug 28 '20 at 14:11