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
Does anybody have an idea how to overcome this limitation?
My use case: https://beta.observablehq.com/@drom/resch-reactive-schema
@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:
… 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.