How to debug office add-in for mac?

4
votes

I am developing a MS office add-in for Word. The test version is working fine on Word for Windows, but fails on Office for Mac.

On Office for Mac, the add-in loads as it is supposed to, but whenever I try to click a button that executes a JS script that calls on a php web service that communicates with a MySQL database, nothing happens.

I don't get any error messages, so I am looking for advice on how to debug the add-in on a mac. What tools can I use?

For background, I have tried

  1. The Vorlon.js guidance here: https://blogs.msdn.microsoft.com/mim/2016/02/18/vorlonjs-plugin-for-debugging-office-addin/

But it does not seem to work. The problem might be that I am not very familiar with Git, and following the instructions literally might not work.

  1. I have also tried loading the add-in directly in Chrome, and using the Dev tools. This does not work because the add-in depends on an API that it can only access when it is launched via Word.
3
office-js

3 Answers

4
votes

The documentation at https://docs.microsoft.com/en-us/office/dev/add-ins/testing/debug-office-add-ins-on-ipad-and-mac is now updated with the following guide you can use to use Safari Web Inspector for the Mac:

To be able to debug Office Add-ins on Mac, you must have Mac OS High Sierra AND Mac Office Version: 16.9.1 (Build 18012504) or later. If you don't have an Office Mac build, you can get one by joining the Office 365 Developer program.

To start, open a terminal and set the OfficeWebAddinDeveloperExtras property for the relevant Office application as follows:

defaults write com.microsoft.Word OfficeWebAddinDeveloperExtras -bool true

defaults write com.microsoft.Excel OfficeWebAddinDeveloperExtras -bool true

defaults write com.microsoft.Powerpoint OfficeWebAddinDeveloperExtras -bool true

defaults write com.microsoft.Outlook OfficeWebAddinDeveloperExtras -bool true

Then, open the Office application and insert your add-in. Right-click the add-in and you should see an Inspect Element option in the context menu. Select that option and it will pop the Inspector, where you can set breakpoints and debug your add-in.

Note

Please note that this is an experimental feature and there are no guarantees that we will preserve this functionality in future versions of Office applications.

2
votes

The problem is most likely with HTTPS. Add-ins require HTTPS, and by extension any scripts that they use must be HTTPS as well, including the Vorlon script. Therefore, you have to configure Vorlon to use SSL in order to use Vorlon with add-ins.

If you installed Vorlon using git, you should know where the Vorlon folder is. If you installed it with npm, I found it in /usr/local/lib/node_modules. Under the vorlon/ folder, go to the Server folder and edit the config.json file. If you installed with npm, you'll need to ctrl-click > Get Info > unlock and change the permissions to Read & Write because they are Read Only by default. In the config.json file, change the useSSL property to true. While you're there, you can also enable the Office plugin if you want.

Now you can start the vorlon server with the command sudo vorlon, and it should run with SSL. You will need to trust the certificate, which you should be prompted to do when you navigate to https://localhost:1337, or otherwise you can find the certificate file in the vorlon folder under /Server/cert.

Make sure that the element in your add-in's default html file (such as home.html) now uses the https URL, i.e. https://localhost:1337/vorlon.js.

Now you should be able to see connected clients in the Vorlon interface and debug your add-in.

We need to update our debugging topic to better reflect these setup requirements. Thank you for identifying this gap!