❔ How can I get Rider to debug an Office add-in?

I'm trying to get started debugging Office add-in with Rider. I have found guides all over without but only for VSCode so I'm asking here. I have gleaned that I am suppose to use the office-addin-debugging npm script. This script is supposed to set up a debugging environment, run a dev server, and open Word and side load my add-in.

It does all this but in a way that I don't fully understand, or would rather it did it differently. My add-in is a React app and what happens when I manually run my start npm script is that office-addin-debugging does these things:

  1. starts up a debugger. I don't know what this actually means.
  2. starts the dev server with webpack in a detached process
  3. then starts up Word and side loads the add-in
  4. stops the debugger. I don't know why it does this. Maybe because either the webpack-dev-server process returns or because the Word.
Rider's Debug tool window shows "Process finished with exit code 0", and none of my TypeScript breakpoints get hit.

If I launch my start script as a Rider debug config then the process doesn't exit, and if I hit the pause button the debugger breaks somewhere random in my TypeScript. Yet none of my breakpoints get hit when I reload the add-in from Word.

I think the main problem here is that office-addin-debugging starts webpack in a detached process and not in the debugging process, which is probably node. I simply don't know. Having a web server and Word runnign at the same time complicates things.
Was this page helpful?