How to debug Observable values in Angular2 / Typescript?

angular, observable, rxjs, rxjs5, typescript

Solution

There're several article on this topic but most easily use `do()` operator to see what's going on in your operator chains.

Read more:

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/testing.md#debugging-your-rx-application

How to debug rxjs5?

http://staltz.com/how-to-debug-rxjs-code.html

https://react.rocks/example/rxvision

http://jaredforsyth.com/2015/03/06/visualizing-reactive-streams-hot-and-cold/

Problem

I have followed the tutorial for angular 2 and have a search functionality that renders a list of heroes asynchronously. ``` <div *ngFor="let hero of heroes | async"> {{hero.name}} </div> ``` In the component I have observable heroes: ``` heroes: Observable<Hero[]>; ``` Now I have implemented similar functionality in my application by I don't see anything and I don't see any errors either. I opened the debugger in Chrome and tried to check the value of heroes, but it's just some Observable wrapper of course. Is there any way to see the current/last or some value in the debugger or maybe there is some other technique to debug such issues?

Original source

Related problems