1

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.

  1. npm i -g react-devtools
  2. react-devtools
  3. Copy <script> tag into my code.

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

enter image description here

Don P
  • 60,113
  • 114
  • 300
  • 432

1 Answers1

2

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://learn.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.

enter image description here

Mohamed Mansour
  • 39,445
  • 10
  • 116
  • 90
  • Mohamed - I get an HTTPS <-> HTTP error since React DevTools is running on HTTP, and my add-in is over HTTPS. Did you run your add-in over HTTP? Or did you get DevTools to work with HTTPS? – Don P Jan 24 '19 at 21:23
  • @DonP I first opened Chrome to access my add-in (https://localhost:3000) , I accepted the cert that way. Then I opened react devtools and placed http there, it worked. There is a section regarding installing cert of your add-in in the docs, but I didn't do that, I just forced it manually. – Mohamed Mansour Jan 25 '19 at 02:29