How to debug Observable values in Angular2 / Typescript?

Question

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?

Answer 1

In RxJS v6+, the tap() operator has replaced do(). So it will look more like this now:

someObservable$.pipe(
  map(x => x.whatever),
  tap(whatever => console.log(whatever)),
)

Answer 2

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/