Debug API in TypeScript with Angular 12 via Chrome

user_665335 0
Viewed 179

I cannot find a solution from SO.

How to debug and check hello below?

getHero(): void {
  const id = parseInt(this.route.snapshot.paramMap.get('id') !, 10);
  this.heroService.getHero(id)
    .subscribe(hero => this.hero = hero);
}

https://stackblitz.com/angular/roynrxqmenv?file=src%2Fapp%2Fhero-detail%2Fhero-detail.component.ts

It shows undefined like below, but actually has value, enter image description here

Any idea?

Similarly, how to debug the returned value for getHero below. the h below doesn't display anything.

getHero(id: number): Observable<Hero> {
  const url = `${this.heroesUrl}/${id}`;
  return this.http.get<Hero>(url).pipe(
    tap(h => this.log(`fetched hero id=${id}`)),
    catchError(this.handleError<Hero>(`getHero id=${id}`))
  );
}

https://stackblitz.com/angular/roynrxqmenv?file=src%2Fapp%2Fhero.service.ts

angular typescript
1 Answers

The easiest way would be to wrap the single line statement in the callback function with {}

getHero(): void {
  const id = parseInt(this.route.snapshot.paramMap.get('id') !, 10);
  this.heroService.getHero(id)
    .subscribe(hero => {
      // debugger;
      this.hero = hero;
    });
}

This would allow you to place breakpoints in browsers at the right spot.

You could also place a debugger in there, just in case.

user_26222920
Related