01-debug-rxjs.ts

onSelectUser(participantId:string) {

  this.participantsService.findParticipantById(parseInt(participantId))
      .debug("Loading participant from backend")
      .subscribe(
          participant => {
              ...
          },
          console.error
      );

}

02-do-operator.ts

  findParticipantById(participantId: number): Observable<Participant> {
        return this.http.get(`/api/participants/${participantId}`)
            .do( res => console.log('HTTP response:', res))
            .map(res => res.json().payload)
            .do(console.log);
  }

03-debug-operator.ts

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import {Observable} from "rxjs";

const debuggerOn = true;

Observable.prototype.debug = function (message: string) {
    return this.do(
        function (next) {
            if (debuggerOn) {
                console.log(message, next);
            }
        },
        function (err) {
            if (debuggerOn) {
                console.error('ERROR >>> ',message , err);
            }
        },
        function () {
            if (debuggerOn) {
                console.log('Completed.');
            }
        }
    );
};

04-debug-rxjs.ts

declare module 'rxjs/Observable' {
    interface Observable<T> {
        debug: (...any) => Observable<T>;
    }
}