如何使用angular 4调试rxjs takeWhile命令？

Question

I am using rxjs takeWhile method in my typescript to run a poll(periodic requests) while a condition is true. But the problem is that the poll is running continuously even after the condition is False. I tried to debug it using the chrome developer tools by keeping the breakpoints, but unfortunately the breakpoint is not working for takeWhile method. How do I print statements inside a takeWhile method or to put a breakpoint inside takeWhile method.

Observable.interval(10000)
  .switchMap(() => http.get('/route1'))
  .map((data) => data)
  .takeWhile(() => this.obj.var === 'show_files')
  .subscribe((data: any) => {})

I am setting this "this.obj.var" to something else when I load another page to stop the polling. I just want to poll if the user is in current page and stop polling when user navigated to any other page just to avoid overload on browser with conrinouos requests.

Could you help me on how to debug rxjs methods using chrome developer tools

Answer 1

You can use do operator to log your result

Observable.interval(10000)
.switchMap(() => http.get('/route1')).map((data) =>data)
.do(value=>console.log(value))
.takeWhile(() => this.obj.var === 'show_files').subscribe((data: any) => {})

Answer 2

You can update the code of arrow-function that you pass to takeWhile() operator:

Observable.interval(10000)
  .switchMap(() => http.get('/route1'))
  .map((data) => data)
  .takeWhile(() => {
     // You can put a breakpoint on next row via chrome developer tools
     const condition = this.obj.var === 'show_files';
     console.log(condition);
     return condition;
   })
  .subscribe((data: any) => {})