通过 Chrome 使用 Angular 12 在 TypeScript 中调试 API

Question

我找不到 SO 的解决方案。

如何调试和检查下面的hello？

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

它像下面这样显示undefined，但实际上是有价值的，

有什么想法吗？

同理，下面如何调试getHero的返回值。 下面的h 不显示任何内容。

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

Answer 1

最简单的方法是用{}将单行语句包装在回调函数中

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

这将允许您在浏览器中的正确位置放置断点。

您也可以在其中放置一个debugger，以防万一。