Developer Experience: Use Chrome elements panel to interact with render tree

[bryphe]

This is from @jchavarri and @jordwalke 's ideas on the Discord channel. A key value proposition of Electron is that it's really easy to debug - you get a built-in debugger with Electron! Right now, we don't have anything equivalent in the revery world.

The idea Javier and Jordan had was that we could leverage the Chrome DevTools using either their integration API, or by creating pseudo-elements in the DOM and listen to mutation event

Potential Paths

Option 1: Integrate with the Chrome UI DevTools directly - Javier posted this link: https://www.chromium.org/developers/how-tos/inspecting-ash This documentation on the DevTools protocol looks helpful, too: https://chromedevtools.github.io/devtools-protocol/ This could open the door for inspecting Revery elements in the browser, as well as hooking up to other 'adapters' that speak the chrome debug protocol, like VSCode.

Option 2: Render pseudo-elements to the Chrome UI DevTools - Jordan showed how to create elements and then hook up mutation observers to essentially create a two-way sync.

These options aren't necessarily mutually exclusive; we could potentially use Option 1 for native and Option 2 for JSOO, for example!

Open Questions

• Would it make sense to build this integration in revery or reason-reactify? The nice thing about it being in reason-reactify is that any consumer of that library could also benefit from the developer tools!
• Would it be possible to open this elements panel directly while running revery - similiar to how you can open the developer tools in Electron? It seems like we could open a Chrome instance with a special URL that accesses devtools + a host/port where the revery debug adapter would be.

[jordwalke]

These options aren't necessarily mutually exclusive; we could potentially use Option 1 for native and Option 2 for JSOO, for example!

And I believe you could use either approach for either native or JS. It would all work with everything.

[zbaylin]

I'm going to try to kickstart some work on this.

I found this project by Facebook which does essentially the same thing for Android development: https://facebook.github.io/stetho/. The main thing I would want to look at would be how they port the view hierarchy over to the Chrome dev tools.

I also think we would need a websocket server. I found websocket, but I am not the best at LWT and it might take me a bit to familiarize myself with how the library works.

I'm very excited to see how this can turn out!