Don't see my React component in React Dev Tools

Community Help
1

First, thank you for the Observable! Use it every day.

I am building some parts on my notebooks as React Apps, and trying to inspect these React Apps with the React DevTools. I see the main Observable React component tree but no sign of my components.
If I understand correctly, that is because of all user-level content is wrapped in iframe ?
Does anybody have an idea how to overcome this limitation?

My use case: https://beta.observablehq.com/@drom/resch-reactive-schema

1 Like
2

@drom — It looks like connecting the React DevTools to an https iframe is a little bit tricky. You can’t do it with the regular browser extension, and the standard global react-devtools npm install also doesn’t support https iframes (it can do http iframes, however).

There’s an open ticket: https://github.com/facebook/react-devtools/issues/881

And here’s the linked fork of react-devtools that listens over HTTPS, using a self-signed certificate, instead of over HTTP. You should be able to install it, and connect the Electron app inspector to your Observable notebook by adding a cell that looks like this:

require("https://192.168.51.239:8097")

… where the IP address is the local IP for your machine.

Let me know if you get this figured out. It’s a question that other folks probably have too.

1 Like