How to visualise Observables in the browser?

[OliverJAsh]

Hi there,

First of all, thanks for the fantastic tooling.

Is it possible to visualise an Observable that only works in a browser? For example, I have this code which uses Intersection Observers (a browser API): http://jsbin.com/ronocay/2/edit?js,console,output

Looking at the documentation, it only seems to instrument Observables running in Node.

Thanks, Oliver

[hermanbanken]

Actually rxfiddle.net runs inside the browser, but I see that IntersectionObservers are not available in the Worker's API.

Your code in RxFiddle

My goal is to be able to instrument ALL Observables, on any platform and any language. However that is quite the effort, so I've focussed on RxJS only. Node is not required, but I did not document the way to post data to RxFiddle from the browser yet. Problems with cross-browser communication are still not solved though.

Another way would be to create a Chrome extension. This would allow you to run your example on your own site or on JsFiddle (with the HTML editor/viewer) and see the visualization in the Developer drawer. If you have experience with Chrome Extensions feel free to help: I don't have that much experience with running content and background scripts.

For now, the best way to handle this would be to mock the IntersectionObserver... sorry.

[OliverJAsh]

If you have experience with Chrome Extensions feel free to help: I don't have that much experience with running content and background scripts.

I have written a few, as it happens.

Off the top of your head, what would be involved?

[hermanbanken]

It would

• need to detect the Rx object available in the current tab (as soon as possible, before it is used)
• needs to run the right instrumentation (the code part of the rxfiddle npm package)
• send over the collected data to the background page which will forward it to the Chrome Debugger Extension tab

RxFiddle's view is already capable of receiving messages from the postMessage/onMessage scheme, requiring only minimal changes to be packaged inside the Chrome Extension.

[hermanbanken]

I actually already tried to setup something (app/devtool) but I had to prioritize getting my master (by creating the experiment) before adding that kind of features.

[hermanbanken]

@OliverJAsh using RxFiddle 1.0.4 I managed to instrument an Angular 4 project. The way it works is by opening a child window (window.open) and sending postMessage's to that window. Does this work for you?

I still want to create the devtool, and it shouldn't be so hard having most of the plumbing already done for the window.open-feature and Chrome/Firefox specific support by similar projects (like cycle-devtool, react-devtool and redux-devtool) is already out there.