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

原文链接: blog.angularindepth.com/debugging-r…
本文为 RxJS 中文社区翻译文章&＃xff0c;如需转载&＃xff0c;请注明出处&＃xff0c;谢谢合作&＃xff01;
如果你也想和我们一起&＃xff0c;翻译更多优质的 RxJS 文章以奉献给大家&＃xff0c;请点击【这里】

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

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

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

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

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

还有一些功能&＃xff0c;如果能有就更好了&＃xff1a;

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

综合考虑这些功能后&＃xff0c;我开发了 rxjs-spy 。

核心概念

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

tag 操作符可以单独使用: import "rxjs-spy/add/operator/tag" 。这样的话&＃xff0c;rxjs-spy 的其他方法会在生成版本中被忽略&＃xff0c;所以唯一的开销就是字符串的使用 (导入)。

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

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

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

控制台 API 功能

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

import { Observable } from "rxjs/Observable"; import { spy } from "rxjs-spy"; import "rxjs/add/observable/interval"; import "rxjs/add/operator/map"; import "rxjs/add/operator/mapTo"; import "rxjs-spy/add/operator/tag"; spy(); const interval &＃61; new Observable .interval(2000) .tag("interval"); const people &＃61; interval .map((value) &＃61;> { const names &＃61; ["alice", "bob"]; return names[value % names.length]; }) .tag("people") .subscribe();

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

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

要显示某个特定的标记 observable&＃xff0c;需要将标签名或正则表达式传给 show&＃xff1a;

通过调用 rxSpy.log 可以启用某个标记 observable 的日志&＃xff1a;

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

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

调用 rxSpy.undo() 会显示所有调用过的方法的列表&＃xff1a;

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

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