How to debug an Office.js Manifest File
Tags: office, word, microsoft, addin
Published: 2020-12-22 08:47:11

For the past couple of weeks, I have been developing Microsoft Word Add-in's using the [Office.js](https://docs.microsoft.com/en-us/office/dev/add-ins/overview/learning-path-beginner) 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](https://docs.microsoft.com/en-us/office/dev/add-ins/testing/troubleshoot-manifest), 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](https://www.npmjs.com/package/office-addin-manifest) 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](https://docs.microsoft.com/en-us/office/dev/add-ins/testing/troubleshoot-manifest), 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](https://support.microsoft.com/en-us/windows/how-to-open-registry-editor-in-windows-10-deab38e6-91d6-e0aa-4b7c-8878d9e07b11) on Windows. You can just search for it in the search bar and the logo looks like that.  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qx4jou1da0shy0rl4c4t.png)
2. Navigate to `HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Wef\Developer\`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2f2sa8z03hnhjg4y825v.PNG)
3. Add a key called `RuntimeLogging` to `Developer`. To do that, just right click on the `Developer` folder and choose `New` and then `Key`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aeclvujrmho1yhcr9yyv.png)
4. Click on `RuntimeLogging` and then double click on (Default) in the box to the right. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h5wxkrc2rpwlwfn7ow11.png)
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.  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7naacjmlxki474vpe0ek.png)
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. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/as7mru4afccfvzhbnu46.PNG)

Happy debugging!