如何调试 Angular2/Typescript 中的 Observable 值？

Question

我已经按照 angular 2 的教程进行操作，并且具有异步呈现英雄列表的搜索功能。

<div *ngFor="let hero of heroes | async">
    {{hero.name}}
</div>

在组件中我有可观察的英雄：

heroes: Observable<Hero[]>;

现在我已经在我的应用程序中实现了类似的功能，我没有看到任何东西，也没有看到任何错误。我在 Chrome 中打开调试器并尝试检查 heroes 的值，但它当然只是一些 Observable 包装器。

有没有办法在调试器中查看 current/last 或某些值，或者是否有其他技术可以调试此类问题？

Answer 1

首先，如果您使用的是打字稿，请考虑：

heroes: Observable<Array<Hero>>;

如果你想打印它，你可以简单地添加你的代码：

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

Answer 2

关于这个主题有几篇文章，但最容易使用 do() 运算符来查看您的运算符链中发生了什么。

阅读更多：

Answer 3

您可以使用 do() 运算符 EX :

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

如果 do() 函数内部没有任何反应，则表示您没有订阅该 observable，请记住 observable 正在等待订阅开始做某事。

Answer 4

在 RxJS v6+ 中，tap() 运算符取代了 do()。所以它现在看起来更像了：

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

Answer 5

如果你想做一些console.log调试，我在s-rxjs-utils中写了一个小帮手logValues()。您可以像这样使用它（来自文档）：

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

您还可以向其传递一个字符串以与值一起打印，并指定日志级别。

Answer 6

由于在我的调试经验中，我需要的信息比使用 tap 运算符记录的信息要多，因此我为此编写了一个库 1log：

import { log } from '1log';
import { timer } from 'rxjs';

timer(500).pipe(log).subscribe();

Answer 7

您可以使用 .pipe() 进行记录，如图所示。

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

如何调试 Angular2/Typescript 中的 Observable 值？

How to debug Observable values in Angular2 / Typescript?

observable

rxjs

typescript

rxjs5

angular