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?

Hopefully, some tools to aid debugging RxJS will be built. Until then, you might find this useful: http://staltz.com/how-to-debug-rxjs-code.html And maybe this answer: http://stackoverflow.com/a/38597548/6680611 — cartant, Oct 26 '16 at 07:53

score 13 · Answer 1 · answered Feb 06 '19 at 14:02

13

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

answered Feb 06 '19 at 14:02

Harry

131
1
4

score 10 · Accepted Answer · edited May 23 '17 at 12:17

10

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:

edited May 23 '17 at 12:17

Community

1
1

answered Oct 26 '16 at 08:12

martin

93,354
25
191
226

1

So there is no way to use the debugger for that purpose if I understood correctly? – Ilya Chernomordik Oct 26 '16 at 08:26
1

@IlyaChernomordik Of course you can use debugger. The problem is that it's not very helpful because there're so many nested calls and so many anonymous Observables and function that it's very hard keep track of what's going on inside. This is described also in the doc https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/testing.md#long-stack-traces-support – martin Oct 26 '16 at 08:29

score 2 · Answer 3 · answered Oct 26 '16 at 08:02

2

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

answered Oct 26 '16 at 08:02

Meir

14,081
4
39
47

So back to console logging and no debugging options? P.S. Why is Array better than Hero[]? This is directly from Angular2 tutorial. – Ilya Chernomordik Oct 26 '16 at 08:09
No pain no gain :-) But even stalz relate to the hardship of debugging. As for Array, I find it more readable and consistant with the typed approach. Imagine Array>, Item[][]? (Item[])[]? it gets messy. – Meir Oct 26 '16 at 08:30
The debugger (in Chrome at least) now allows fine-grained breakpoints. I was able to write a statement like in this answer, put a breakpoint directly on the log call, and then the Local Scope window showed the value of v as the materialized Observable. – Greg Charles Apr 21 '21 at 21:18

score 1 · Answer 4 · answered Oct 26 '16 at 08:28

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.

score 1 · Answer 5 · answered Mar 17 '21 at 10:55

1

U can use .pipe() to log as shown.

constructor(
    private variable: Variable<any>
  ) {
    this.field= this.variable.select<any>(state => state.field).pipe(
        tap(Value => console.log('Field: ', Value ))
    );
  }

answered Mar 17 '21 at 10:55

Mr.Curious

282
1
3
11

score 0 · Answer 6 · answered Jun 15 '19 at 23:14

If you want to do some console.log debugging, I wrote a little helper logValues() in s-rxjs-utils. You can use it like this (from the docs):

of(1, 2).pipe(logValues()).subscribe();
// prints using console.log:
// [value] 1
// [value] 2
// [complete]

You can also pass it a string to print along with the values, and specify the log level.

How to debug Observable values in Angular2 / Typescript?

6 Answers6

Linked