专栏首页较真的前端[译] 调试 RxJS 第1部分: 工具篇

[译] 调试 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),作者:郑丰彧

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Chrome开发者工具还有这些功能,你知道吗?

    用户1687375
  • 编写自己的webpack loader

    用户1687375
  • 怎样才算是个出色的移动网站[译]

    用户1687375
  • BZOJ4006: [JLOI2015]管道连接(斯坦纳树,状压DP)

    attack
  • 码云推荐 | 基于EasyUI 1.5.x 的免费美化主题包

    作者语 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包,拥有百度编辑器、cropper、Highcharts、justgage、...

    码云Gitee
  • 用 Algolia DocSearch 轻松实现文档全站搜索

    overtrue
  • Linux内核Crash分析

    在工作中经常会遇到一些内核crash的情况,本文就是根据内核出现crash后的打印信息,对其进行了分析,使用的内核版本为:Linux2.6.32。

    用户5807183
  • 终结HashMap面试?我是谁?我在哪

    来源:https://www.cnblogs.com/zhuoqingsen/p/HashMap.html

    JAVA葵花宝典
  • 有关DoS攻击,up主的声明

    1.本人服务器也曾遭受过最大规模20Gbps的攻击,发生在2019-7-30,当时因为此时曾去公安机构报案,但最终以失败告终

    Ar-Sr-Na
  • 6、backbone中的view实例[fixed 升级到最新版本]

    Backbone的view是用来显示你的model中的数据到页面的,同时它也可用来监听DOM上的事件然后做出响应。 先要给出一个页面的大体代码,下面的所有试验代...

    the5fire

扫码关注云+社区

领取腾讯云代金券