Don't see my React component in React Dev Tools

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:

1 Like

@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:

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:


… 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