Question

我已经按照角度2的教程进行操作，并且拥有一个搜索功能，可以异步呈现英雄列表。

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

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

heroes: Observable<Hero[]>;

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

有没有办法在调试器中查看当前/最后或某个值，或者是否有其他技术来调试此类问题？

Answer 1

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

了解更多：

Answer 2

在RxJS v6 +中，tap()运算符已替换do()。所以现在看起来更像这样：

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

Answer 3

首先，如果你正在使用打字稿，请考虑：

heroes: Observable<Array<Hero>>;

如果您想打印它，只需添加代码：

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

Answer 4

您可以使用 do（）操作符EX：

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

如果do（）函数内部没有任何反应，则表示您没有订阅该observable，请记住observable正在等待订阅开始执行某些操作。

Answer 5

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

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

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

Answer 6

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

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

Answer 7

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

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

您还可以将字符串与值一起传递给它，并指定日志级别。

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

7 个答案: