[译] 调试 RxJS 第1部分: 工具篇

原文链接: https://blog.angularindepth.com/debugging-rxjs-4f0340286dd3 本文为 RxJS 中文社区 翻译文章,如需转载,请注明出处,谢谢合作! 如果你也想和我们一起,翻译更多优质的 RxJS 文章以奉献给大家,请访问下方链接

https://github.com/RxJS-CN/rxjs-articles-translation

我是一位 RxJS 信徒,在我所有活跃的项目中都在使用它。用了它之后,我发现很多乏味的事现在都变得很简单。然而,有一件事却没有任何好转,那就是调试。

由于 RxJS 的可组合性与有时是异步的本质使得调试变成了一种挑战:没有太多的状态可以观察,而且调用堆栈基本也没什么帮助。我之前的做法是在整个代码库中穿插大量的 do 操作符和日志来检查流经组合 observables 的值。由于以下几点原因,我对这种方法并不满意:

  • 我总是在不断地添加日志,调试的同时还要更改代码
  • 调试完成后,对于日志,我要么一条条的进行手动删除,要么选择忍受
  • 匆忙之中将 do 操作符随意放置在一个组合 observable 中间时,应该避免有条件的日志输出的太恐怖
  • 即使是专门的日志操作符,其体验也不理想

最近,我花费了一些时间开发了一个 RxJS 的调试工具。它有如下几个功能,而且我觉得是这个工具必须要具备的:

  • 它应该尽可能地不唐突
  • 它应该不需要靠不断修改代码来进行调试
  • 特别是,它应该不需要解决问题后靠手动删除或注释掉调试代码
  • 它应该支持可以轻松启用和禁用的日志
  • 它应该支持捕获可以随时间进行比较的快照
  • 它应该提供一些与浏览器控制台的集成,用于打开/关闭调试功能和检查状态,等等

还有一些功能,如果能有就更好了:

  • 它应该支持暂停 observables
  • 它应该支持修改 observables 或 observables 发出的值
  • 它应该支持除控制台之外的日志机制
  • 它应该是可扩展的
  • 它应该采取一些方法来捕获可视化订阅依赖所需的数据

综合考虑这些功能后,我开发了 rxjs-spy

核心概念

rxjs-spy 引入了 tag 操作符,它将一个字符串标签和一个 observable 关联起来。这个操作符并没有以任何方式来改变 observable 的行为和值。

tag 操作符可以单独使用:

 import "rxjs-spy/add/operator/tag" 。

这样的话,rxjs-spy 的其他方法会在生成版本中被忽略,所以唯一的开销就是字符串的使用 (导入)。

大多数工具方法都接受匹配器 ( matchers ),以确定它们即将应用哪些标记过的 observables 。匹配器可以是简单的字符串、正则表达式或传递标签本身的函数谓词 ( predicates )。

当通过调用工具的 spy 方法配置后,它会在 Observable.prototype.subscribe 上打补丁,这样它就能够侦察到所有的订阅、通知和取消订阅。当然,只有被订阅的 observables 才能通过 spy 进行侦察。

rxjs-spy 公开了一个模块 API 用于在代码中调用,还公开了一个控制台 API 供用户在浏览器的控制台中进行交互。大多数时候,我都是在应用的启动代码中早早地调用模块 API 的 spy 方法,然后使用控制台 API 来执行剩下的调试工作。

控制台 API 功能

调试时,我通常使用浏览器的控制台来检查和操纵标记过的 observables 。控制台 API 还是通过示例来解释比较容易,下面的代码示例展示了如何与 observables 配合使用:

rxjs-spy 的控制台 API 是通过全局变量 rxSpy 公开的。

调用 rxSpy.show() 会显示所有标记过的 observables 列表,并表明它们的状态 (未完成、已完成或报错)、订阅者的数量以及最新发出的值 (如果有值发出的话)。控制台输出是像这样的:

要显示某个特定的标记 observable,需要将标签名或正则表达式传给 show:

通过调用 rxSpy.log 可以启用某个标记 observable 的日志:

调用 log 时不带任何参数会启用所有标记 observables 的日志。

模块 API 的大部分方法会返回一个拆解函数,它用来解除方法的调用。在控制台中管理这些太麻烦了,所以还有另外一种选择。

调用 rxSpy.undo() 会显示所有调用过的方法的列表:

使用方法调用相关联的数字来调用 rxSpy.undo 会直接调用调用方法的拆解函数。例如,调用 rxSpy.undo(3) 会看到 interval observable 的日志停止输出:

有时候,当调试的同时修改 observable 或它的值是很有用的。控制台 API 包含 let 方法,它的作用同 RxJS 中的 let 操作符十分相似。它的实现方式是这样的:调用 let 方法会影响到标记 observable 的当前订阅者和将来的订阅者。例如,下图中的调用会看到 people observable 发出 mallory,而不是 alice 或 bob:

同 log 方法一样,let 方法的调用也可以取消:

对我来说,调试时能够暂停 observable 的功能几乎是不可或缺的。调用 rxSpy.pause 会暂停标记 observable 并返回一个用于控制和检查 observable 通知的 deck 对象:

调用 deck 的 log 方法会显示 observable 是否暂停和暂停期间的所有通知 (通知是使用 materialize 操作符获取的 RxJS 的 Notification 实例)。

调用 resume 方法会发出所有暂停期间的通知并恢复 observable:

调用 pause 会看到 observable 再次回到暂停状态:

很容易会忘记将返回的 deck 赋值给了哪个变量,所以控制台 API 还提供了 deck 方法,它的行为类似于 undo 方法。调用它会显示所有 pause 调用的列表:

使用 pause 调用相关联的数字来调用 deck 方法并会返回相关联的 deck 对象:

就像 log 和 let 调用一样,pause 调用也可以取消,并且取消 pause 调用会恢复标记的 observable:

希望上面的示例会让你对 rxjs-spy 以及它的控制台 API 有一个大致的了解。「 调试 RxJS 」系统的后续部分会专注于 rxjs-spy 的具体功能,以及如何使用它来解决实际的调试问题。

对于我而言,rxjs-spy 确实可以使调试 RxJS 变得有趣起来。

更多信息

rxjs-spy 的源码托管在 GitHub 上,这里有一个可以操作控制台 API 的在线示例。 GitHub地址:https://github.com/cartant/rxjs-spy 在线示例地址:https://cartant.github.io/rxjs-spy/

还可以通过 NPM 来安装包。

NPM包名称:rxjs-spy

原文发布于微信公众号 - 较真的前端(gh_7af41a2be77e)

原文发表时间:2017-11-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏网络

Nginx 教程(1):基本概念

英文:netguru,翻译:开源中国 www.oschina.net/translate/nginx-tutorial-basics-concepts 简介 嗨...

19710
来自专栏代码GG之家

Scoops android app多主题架构(五)

原理分析 核心代码位置 https://github.com/52inc/Scoops/tree/master/scoops/src/main/java/com...

2099
来自专栏C/C++基础

C的全缓冲、行缓冲和无缓冲

基于流的操作最终会调用read或者write函数进行I/O操作。为了使程序的运行效率最高,流对象通常会提供缓冲区,以减少调用系统I/O库函数的次数。

1322
来自专栏老马寒门IT

Node入门教程(6)第五章:node 模块化(上)模块化演进

node 模块化 JS 诞生的时候,仅仅是为了实现网页表单的本地校验和简单的 dom 操作处理。所以并没有模块化的规范设计。 项目小的时候,我们可以通过命名空间...

2894
来自专栏琦小虾的Binary

程序生成之编译、链接、加载浅析

程序生成之编译、链接、加载浅析 最近笔者看论文烦得慌,便又重新拾起之前没有完全完成的交叉编译,准备在网上找资料,好好研究一下。 讲道理,笔者其实对编译链接的...

2876
来自专栏林冠宏的技术文章

Golang, 以17个简短代码片段,切底弄懂 channel 基础

(原创出处:https://cloud.tencent.com/developer/user/1148436/activities) 前序:   因为打算自己搞...

3825
来自专栏阿杜的世界

会话管理

Http协议是无状态协议,Web服务器没有短期记忆。在有些应用场景(例如:购物车)下,需要跨越多个请求识别同一个客户——客户跟踪,在Web应用中使用Cookie...

602
来自专栏Golang语言社区

go-concurrent-programming.md

最近在看《Programming in Go》, 其中关于并发编程写得很不错, 受益非浅, 其中有一些例子是需要多思考才能想明白的, 所以我打算记录下来, 强化...

4139
来自专栏Golang语言社区

Golang通用连接池

连接池在编程中并不少见,链接数据库,redis等操作都需要连接池,否则就会出现并发问题,如果每次操作都建立一条新的链接将会大大消耗资源,笔者也是在使用thrif...

1464
来自专栏君赏技术博客

HQ移动20170127期周报

851

扫码关注云+社区

领取腾讯云代金券