如何在Chrome调试器里检查嵌套Observable对象

在Slack的preference里, 可以设置当别人发送包含有指定内容关键字的文本信息时,自动高亮提示,关键字大小写不敏感。

一个例子：

举个例子，看如下这个嵌套的Observable对象：

items$: Observable<Observable<Product>[]> = this.componentData$.pipe(
    map((data) => data.productCodes.trim().split(' ')),
    map((codes) =>
      codes.map((code) => this.productService.get(code, this.PRODUCT_SCOPE))
    )
  );

this.componentData$是Observable，调用pipe，在pipe里的map操作，内部执行了一个map操作，因此最后返回的Observable对象是嵌套的。

那么我们在Chrome调试器里看到一个Observable对象，可以知道它是通过哪些操作得来的呢？

可以。

Observable的operator属性，存放的是通过source Observable对象，施加了哪一个操作后得到的当前Observable对象。上述截图的operator->project, 对应了下图高亮的函数： 再看source的operator的project属性：

对应的是下图高亮的函数：

再沿着source往上追溯，这次就不是project，而是predicate了，暗示函数返回的类型是boolean：

上图的operator对应的操作如下：

再往上，这个Observable没有operator，说明它没有被pipe处理过：