RxJS debugging tools

Опубликовано в JavaScript, RxJS • 19 октября 2019 г. • 1 мин. на чтение

rxjs-watcher

https://github.com/xripcsu/rxjs-watcher

Установка пакета и расширения chrome или firefox

npm i rxjs-watcher --save-dev

Пример из документации

import { watch } from "rxjs-watcher";

interval(2000)
  .pipe(
    watch("Interval (2000)", 10),
    filter(v => v % 2 === 0),
    watch("Filter odd numbers out", 10),
  ).subscribe();

Результат в консоли разработчика: RxJS watcher

rxjs-spy

https://github.com/cartant/rxjs-spy

Плотно с инструментом не работал, но есть страница с online примером, где показана как в консоли весьма гибоко можно запускать/смотреть подписки вместо примитивного tap(console.log).

Похожие записи

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

HTML атрибуты и DOM свойства

  • Значение HTML атрибута указывает начальное значение;
  • Значение DOM свойства является текущим значением;
  • Атрибуты инициализируют DOM свойства.

RxJS. Delay from array 

import { of, from } from 'rxjs'; 
import { map, concatMap, delay } from 'rxjs/operators';

from([2,4,6,8]).pipe(
  concatMap(item => of(item).pipe(delay(1000)))
).subscribe(console.log);

Добавить css link и js script динамически 

const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css';
link.integrity = 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO'; // необязательно
link.crossOrigin = 'anonymous'; // необязательно
document.head.appendChild(link);

const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.3.1.slim.min.js';
script.integrity = 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo'; // необязательно
s...

Builder в JS

Builder (cтроитель) - порождающий шаблон программирования. Применяется для создания сложных объектов при помощи цепочки методов someBuilder->setValueA(1)->setValueB(2)->build()