rxjs-debug

Automated RxJS Visualizer

npm i rxjs-debug --save-dev

Introduction

RxJS-Debug provides a single utility function to debug complicated RxJS streams. It visualizes the piped-operators, subscriptions and completion.

🤾 Playground

⚡ Example

The utility function $D is the only API that RxJS-Debug has. You can wrap an Observable with it and enable automated logging without any extra effort.

// a simple observable
const source = of(1);

// wrap it with rxjs-debug
// you can also provide an optional id to identify the Observable
$D(source, {id: 'Special'}) // returns a copy of the original Observable with logging enabled
  // apply operators on it (optional)
  .pipe(
    map(x => x + 5),
    switchMap(x => of(x * 2)),
    delay(200)
  )
  .subscribe(); // activate the stream

This is what you'd get in the console

You can try it out here.

✍ Notes

Please don't leave the $D in your production code/build, rxjs-debug is only meant to be used during development. You should keep the rxjs-debug in your devDependencies and just use $D whenever you need it (for debugging).

🤝 Contributing

We appreciate your help with reporting issues and fixing bugs. We also welcome your suggestions and feedback.

⚖ Licence

MIT

💻 Author

Ankit Singh