Debugging RxJS
There are two major strategies to debug and get information about what's happening inside an RxJS pipe:
- Tap into the event stream and console log the event data at a particular point in the stream
- Execute breakpoint debugging in dev tools
Let's start with using the tap operator.
Tapping an RxJS Event Stream
In Chapter 6, Forms, Observables, and Subjects, we introduced the RxJS tap operator as a way to direct the flow of user input from our search input's stream of change events, and eventually call our doSearch function. When an RxJS stream doesn't seem to be behaving as you'd expect, you can combine the tap operator and console.log to log each event's data, so you can see it over time. Since tap captures the data in the stream based on where it falls in the order of operations, once added to the stream, you can simply use VS Code's line movement keyboard shortcuts to move it around and test the flow...
