在 Chrome 开发工具中观看的表达式未显示值

Question

我正在开发一个 Angular 的应用程序。

我有这个问题。我放了一个debugger;，因为我想在source 选项卡的watch 部分中查看返回属性this.facturas 的内容。但是，在运行应用程序并让它停在我想要的地方之后，当查看watch 时，我只得到undefined 的this.facturas，但问题是它实际上有一个值：它是一个对象数组在我的 .html 模板的表格中填充行的 td's。

.ts 代码：

 this.documentosService.getFacturas(this.requestCuatro).subscribe((data: any) => {
      if (data) {
        if (data.documentos.length == 0 && data.error.codError == 0) {
          swal("Stop! Trolls and Dragons found!");
        } else {
          this.facturas = data.documentos;
          debugger;       
        }

        if (data.error.codError != 0) {
          swal("Warning! Sorry, the old Monarc Elf died :(");
        }
      }
    });

我希望能够查看我从服务器返回的值，但我不确定如何。我在看this.facturas，但我没有定义，所以我编码有点像我的眼睛被遮住了。

有什么帮助吗？谢谢。

Answer 1

尝试观看_this.facturas 或this_.facturas。 Angular 是从 typescript 转译的 javascript，并且因为您在箭头函数中，所以该类中的 this 属性将存储在另一个变量中（this_ 或 _this，现在不记得了）以维护代码中的 this 上下文。

我个人不使用调试器中的“监视”，但通常只查看“范围”部分。尽管this 没有引用正确的上下文，但我从来没有遇到过问题。也许您在没有启用源映射的情况下进行编译。

Answer 2

查看 API 响应的两种更可靠的方法：

1. 记录响应 - 这会将值直接输出到控制台选项卡。

   } else {
     this.facturas = data.documentos;
     console.log(this.facturas);       
   }
   

2. 改为观看“网络”选项卡：可以在“网络”选项卡下直接观察网络/API 请求。找到发出的请求，并检查响应正文：https://developers.google.com/web/tools/chrome-devtools/network/reference#response