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.

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

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

Mohamed Mansour · Accepted Answer · 2019-01-24 09:14:18Z

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.

answered Jan 24, 2019 at 9:14

Mohamed Mansour

40.2k10 gold badges118 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Don P Over a year ago

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?

Mohamed Mansour Over a year ago

@DonP I first opened Chrome to access my add-in (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.

Collectives™ on Stack Overflow

React devtools while developing a Microsoft add-in

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related