我如何跟踪Angular中的代码执行？

Question

我感觉我对Angular中的代码执行方式了解为零。我有这个基本示例，在这里我创建了一个空数组。在构造函数中，我先打印数组，然后调用一个方法，在该方法中再次打印该数组，然后执行循环，然后在该数组中放入5个对象，然后再次打印。为什么所有打印输出都是带有数据的数组？有人可以解释一下这是怎么回事吗？另外，到相关文档的某些链接或更深入的解释将非常有用，我在Angular文档中找不到很多。

console

stackblitz（在控制台上查看）

properties: Property[] = [];
constructor() {
    console.log("Before", this.properties);
    this.getProperties();
}

getProperties() {
    console.log("Before1", this.properties);
     for (var i = 0; i < 5; i++) {
         this.properties[i] = new Property({
             key: "test" + i,
             label: i + "d",
             value: i + "d",
             required: true,
             order: i + 1
         });
     }
    console.log("After1", this.properties.sort((a, b) => a.order - b.order));
}

Answer 1

要跟随代码执行，您可以添加一个

debugger;

您的代码中的命令（就像一个硬编码的断点）

或者您可以打开您的开发工具和所需的文件（例如，关于您的问题）：

然后单击行号以手动添加断点：

在JS文件中，您可以选择一些代码并使用上下文菜单：

您可以在给定的时间评估其价值，或将其放入手表中（右侧）：

随后将在整个代码中跟踪其值。

Answer 2

在调试时，您将看到正确的值

当您打开对象以检查值时，Chrome控制台将获取最新值并显示它。这就是为什么您的所有comsole.log都具有相同值的原因

尝试此

console.log(JSON.stringify(this.properties));