How to debug an Office.js Manifest File

For the past couple of weeks, I have been developing Microsoft Word Add-in's using the Office.js framework, which lets you create web applications that can interact directly with any Microsoft Office application.

One of the tasks that has taken me the most time so far has been understanding and debugging the manifest.xml file, which is the file where UI components like labels and menus that integrate into the context menu (that box you get when you right-click) or the ribbon (the row of buttons at the top) are defined.

Debugging a manifest.xml file can mean two things. We will cover them both here.

1. Determining if it is valid XML for an Office Add-in

Microsoft provides a tool to check whether your manifest.xml is valid. You can read about it in more detail here, but the basics are below.

If you used the Yeoman generator

If you used the Microsoft provided generator to set up the Office Add-in, it is as simple as running the command below:

npm run validate

If you did not use the Yeoman generator

You need to take the extra step of installing the validation package first.

npm install -g office-addin-manifest
npm run validate

This step is well covered in the Microsoft documentation and is mostly here for completeness. But it does not actually report runtime errors, the kind of errors that otherwise silently occur and lead to menus, icons, and buttons not showing up.

2. Determining what errors might be causing it not to render properly

Unfortunately, when you Google for ways to debug the manifest file, it usually points you to the aforementioned validator, which is helpful but does not come close to solving actual bugs in the manifest that might cause your desired UI components to just not appear. It took me several days to figure out how you debug a syntactically correct but broken manifest file, which was a motivation for writing this post.

This debugging methof generates a runtime log for the manifest.xml of the errors that it encountered:

1. Open the Registry Editor on Windows. You can just search for it in the search bar and the logo looks like that.
2. Navigate to HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Wef\Developer\.
3. Add a key called RuntimeLogging to Developer. To do that, just right click on the Developer folder and choose New and then Key.
4. Click on RuntimeLogging and then double click on (Default) in the box to the right.
5. Add the path to the .txt file where you want the log messages to be written. If you have not created a file for that, go and create one. That path should include the file name.
6. Run the Add-in however you normally would in your development environment. As far as I know, it requires no special flags or parameters in any configuration.
7. After the Add-in has loaded in Office, you can check the designated file for any useful log messages.

Happy debugging!