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).

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

Javascript поиск/фильтр по таблице

Живой поиск по ячейкам таблицы на Javascript

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

JS. Добавить параметр к URL без перезагрузки

function updateURL() {
    if (history.pushState) {
        var baseUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
        var newUrl = baseUrl + '?tyapk=awesome';
        history.pushState(null, null, newUrl);
    }
    else {
        console.warn('History API не поддерживается');
    }
}

https://gist.github.com/excalq/2961415#gistcomment-2178956

JS. Заменить объект в массиве по его id

Следует пройтись map'ом по массиву и если id совпадёт, то вернуть заменяемый объект.

Цветные сообщения в console

console.log('%ctyapk', 'color: white; background: #212529; font-size: 32px');

JS. Immutable удаление свойства из объекта

const { password: _, ...result } = {
  id: 7,
  name: 'tyapk',
  password: '12345',
}