An example using the console API

rxjs-spy exposes a module API intended to be called from code and a console API intended for interactive use via the browser’s console.

The documentation for the APIs is in the GitHub README.

This page includes an example showing what can be done with its console API, so open up a DevTools console and give it a go.

The example’s source

Have a look at the this page’s source:

<script>

    rxjsSpy.create();

</script>
<script>

    (function () {
        var interval = rxjs.interval(2000).pipe(
            rxjsSpy.operators.tag("interval")
        );
        var people = interval.pipe(
            rxjs.operators.map(function (value) {
                const names = ["alice", "bob"];
                return names[value % names.length];
            }),
            rxjsSpy.operators.tag("people")
        ).subscribe();
    })();

</script>

Note that there are two script elements. The first configures the spy and the second represents the application code that will be spied upon.

The observables in the second script element are enclosed in an IIFE, so they are not accessible from the console. However, they are tagged, so they can be inspected and manipulated using the spy’s console API.

The example

  1. To inspect the current snapshots of all tagged observables, run the following in the console:

     spy.show();

    You’ll see a listing of snapshots for all tagged observables. There are two: an interval observable; and an observable that emits people’s names.

    To inspect a specific tagged observable, you can pass a string or a regular expression to show. For example:

     spy.show("people");

  2. Logging can be enabled using the API’s logmethod. For example:

     spy.log("people");

    This will enable logging for the specified tag.

    Run the following to log the interval observable’s values, too:

     spy.log("interval");

  3. Calls made to the spy API can be undone using the undo method. To obtain a list of calls, run the following:

     spy.undo();

    It will display a list of numbered calls. Undo the interval logging by passing the appropriate call number:

     spy.undo(3);

  4. The spy API can modify the a tagged observable using the let method. The method behaves in a similar manner to the RxJS let operator.

    For example, the following call will replace the value emitted from the people observable:

     spy.let("people", source => source.mapTo("mallory"));

    Note that the changes will be seen by both current and future subscribers to the observable.

    Undo the change with an undo call:

     spy.undo(3);

  5. The spy API can pause tagged observables using the pause method. For example, the following call pauses the people observable so that it’s emissions can be controlled from the console:

     spy.pause("interval");

    pause returns a Deck instance that can be used to control the observable and return value should be assigned to a variable. It’s easy to forget to do this, so there is a deck method that will display a numbered list of pause calls. Passing a call number to deck will return the instance associated with the call. For example:

     spy.deck();
 var deck = spy.deck(1);

    The deck can be used to inspect and control the observable’s emissions. For example, calling its log method will show the notifications that have been paused:

     deck.log();

    Its step method will release a single paused notification:

     deck.step();

    Its skip method will skip a single paused notification:

     deck.skip();

    And its resume method will release all paused notifications and will resume the observable’s emissions:

     deck.resume();

    Calling its pause method will return the observable to a paused state:

     deck.pause();

  6. All API calls that manipulate observables can be undone, so undo can be used to undo the pausing of an observable. When undone, any paused notifications are resumed:

     spy.undo(3);

There are more examples in the following articles: