Как отлаживать наблюдаемые значения в Angular2 / Typescript?

Question

Я следовал учебному пособию для angular 2, и у меня есть функция поиска, которая асинхронно отображает список героев.

<div *ngFor="let hero of heroes | async">
    {{hero.name}}
</div>

В компоненте у меня есть наблюдаемые герои:

heroes: Observable<Hero[]>;

Теперь я реализовал аналогичную функциональность в своем приложении, потому что ничего не вижу и не вижу ошибок. Я открыл отладчик в Chrome и попытался проверить ценность героев, но это, конечно, какая-то Обязательная оболочка.

Есть ли способ увидеть текущее / последнее или какое-либо значение в отладчике или, может быть, есть какой-то другой метод для устранения таких проблем?

Answer 1

Есть несколько статей на эту тему, но наиболее легко использовать do() оператор, чтобы увидеть, что происходит в цепях вашего оператора.

Прочитайте больше:

• https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/testing.md#debugging-your-rx-application

• Как отладить rxjs5?

• http://staltz.com/how-to-debug-rxjs-code.html

• https://react.rocks/example/rxvision

• http://jaredforsyth.com/2015/03/06/visualizing-reactive-streams-hot-and-cold/

Answer 2

В RxJS v6+ tap() оператор заменил do(), Так что теперь это будет выглядеть так:

someObservable$.pipe(
  map(x => x.whatever),
  tap(whatever => console.log(whatever)),
)

Answer 3

Прежде всего, если вы используете машинопись, подумайте:

heroes: Observable<Array<Hero>>;

Если вы хотите распечатать его, вы можете просто добавить в свой код:

heroes.subscribe((v) => console.log('got new heroes list: ', v));

Answer 4

Поскольку в моем опыте отладки мне требовалось больше информации, чем вы можете войти с помощью tapоператор, я написал для этого библиотеку 1log :

      import { log } from '1log';
import { timer } from 'rxjs';

timer(500).pipe(log).subscribe();

Answer 5

Вы можете использовать .pipe() для регистрации, как показано.

      constructor(
    private variable: Variable<any>
  ) {
    this.field= this.variable.select<any>(state => state.field).pipe(
        tap(Value => console.log('Field: ', Value ))
    );
  }

Answer 6

Вы можете использовать оператор do() EX:

this.http
        .get('someUrl', options)
        .map(res => res.json())
        .do(
            data => {
                console.log(data);
            },
            error => {
                console.log(error)
            }
        )

Если внутри функций do() ничего не происходит, это означает, что вы не подписаны на это наблюдаемое, помните, что наблюдаемые ожидают подписки, чтобы начать что-то делать.

Answer 7

Если вы хотите сделать некоторые console.log отлаживая, я написал маленький помощник logValues() в s-rxjs-utils, Вы можете использовать это так (из документов):

of(1, 2).pipe(logValues()).subscribe();
// prints using console.log:
// [value] 1
// [value] 2
// [complete]

Вы также можете передать ей строку для печати вместе со значениями и указать уровень журнала.