Search code examples
javascriptrxjsgoogle-chrome-devtoolsfirefox-developer-tools

How do I use RxJS Observable in Chrome or Firefox developer tools console?


I would like to quickly test some Observable related functions. In my Chrome Developper Tools (or the Firefox one, doesn't matter).

It seems to me that some days ago I was able to simply execute code like this :

var test$ = Rx.Observable.from([1,2,3]);

directly in my JavaScript console. My recollection seems even more correct since I actually have digged up this example (and many others) from my dev tools console history !


For some reason, it is not working anymore; I get this error :

Uncaught ReferenceError: Rx is not defined

or if I just use Observable instead of Rx.Observable

Uncaught ReferenceError: Observable is not defined


It is not possible to use import statement 'as is' in the Chrome console. Does someone has a solution to debug RxJS code in using browser's Javascript console ?


Solution

  • UPDATE 2020-Dec :

    RxJS in browser'sconsole is back!

    Just go to https://rxjs.dev/ and open devtools console :)

     ____           _ ____      
    |  _ \ __  __  | / ___|    
    | |_) |\ \/ /  | \___ \  
    |  _ <  >  < |_| |___) |    
    |_| \_\/_/\_\___/|____/ 
    
    started experimenting with RxJS:
    
    type this into the console:
    
    rxjs.interval(500).pipe(rxjs.operators.take(4)).subscribe(console.log)
    

    UPDATE 2018-Nov :

    I just noticed that my previous answer (and the accepted one) is not valid anymore. The https://reactive.io site now redirects to https://rxjs-dev.firebaseapp.com/ and shows this :

     ____           _ ____      
    |  _ \ __  __  | / ___|    
    | |_) |\ \/ /  | \___ \  
    |  _ <  >  < |_| |___) |    
    |_| \_\/_/\_\___/|____/ 
    
    Open http://stackblitz.com and try this code to get
    started experimenting with RxJS:
    
    import { interval } from "rxjs"
    
    import { take } from "rxjs/operators"
    
    const subscription = interval(500).pipe(take(4)).subscribe(console.log)
    

    So now Stackblitz is the "official" way to go.

    Original post :

    After going back to the ReactiveX documentation, I had the confirmation by looking at this at the bottom :

    Hint: open your DevTools to experiment with RxJS.

    I simply forgot that this is available only if you open the dev tools from the reactivex.io/rxjs page itself :

    RxJS in Chrome developer tools