How to debug Observable values in Angular2 / Typescript?

First of all, if you're using typescript consider:

heroes: Observable<Array<Hero>>;

If you want to print it, you can simply add in your code:

heroes.subscribe((v) => console.log('got new heroes list: ', v));

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/

You can use the do() operator EX :

this.http
        .get('someUrl', options)
        .map(res => res.json())
        .do(
            data => {
                console.log(data);
            },
            error => {
                console.log(error)
            }
        )

If nothing happens inside the do() functions it means you are not subscribed to that observable, remember that observables are waiting for a subscription to start doing something.

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)),
)