React devtools while developing a Microsoft add-in

Question

Is it possible to use React Devtools while building / debugging a Microsoft Add-in?

What I've tried:

I tried setting up React devtools as a standalone app.

The result is that the standalone react-devtools app is open, but it doesn't connect to React.

Answer 1

Yes, Office Add-In is hosted in an iframe as a normal React App. If you used (choosing React as script):

yo office

It should work as long as you place the debugger script in <head> in src\\index.html :

<script src="http://localhost:8097"></script>

Just make sure you relaunch your add-in.

Note: This was my first time creating the Add-In, I was curious, and make sure you follow the "Update Manifest" section here https://docs.microsoft.com/en-us/outlook/add-ins/quick-start?tabs=visual-studio-code so it will work. It worked without any issues, within 5 minutes.