如何调试在Angular2 /打字稿可观测值？

Question

我遵循了角2的教程，并有使英雄的名单异步搜索功能。

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

在组件我已经观察到的英雄：

heroes: Observable<Hero[]>;

现在，我已经在我的应用程序中实现类似的功能，通过我没有看到任何东西，我没有看到任何错误，无论是。我打开调试器在Chrome中，并试图检查英雄的价值，但它当然只是一些可观察包装。

有没有办法看到在调试器中的电流/最后或某个值或者也许有其他的一些技术调试等问题？

Answer 1

还有就是关于这个主题的几个文章，但最容易使用do()运营商，看看发生了什么事情在你的操作链。

阅读更多：

• 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/

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

如果没有在里面做的情况发生（）函数，这意味着你没有订阅到可观察的，请记住，可观察等待订阅，开始做一些事情。

Answer 5

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

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

你也可以通过它的字符串与值一起打印，并指定日志级别。