How to visualise Observables in the browser?

hermanbanken / RxFiddle

Visualize your Observables

https://rxfiddle.net

MIT License

162 stars 9 forks source link

How to visualise Observables in the browser? #5

Open OliverJAsh opened 7 years ago

OliverJAsh commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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