Как я могу следить за выполнением кода в Angular?

Question

Мне кажется, что я не понимаю, как код выполняется в Angular. У меня есть этот базовый пример, где я создаю пустой массив. В конструкторе я печатаю массив и затем вызываю метод, внутри которого я снова печатаю массив, затем у меня есть цикл, я помещаю 5 объектов в этот массив и печатаю его снова. Почему все распечатки являются массивами с данными? Может ли кто-нибудь объяснить мне, как это происходит? Также была бы полезна некоторая ссылка на соответствующую документацию или более глубокое объяснение, я не мог найти много в Angular docs.

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

Во время отладки вы увидите правильное значение

Когда вы откроете объект, чтобы проверить значение, консоль Chrome примет самое последнее значение и покажет его. Вот почему все ваши comsole.log имеют одно и то же значение

Попробуйте это

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

Answer 2

Чтобы следить за выполнением кода, вы либо добавляете команду

debugger;

в свой код (это похоже на жестко заданную точку останова)

Или вы можете открыть инструменты разработчика и требуемыефайл (например, по вашему вопросу):

и нажмите на номера строк, чтобы добавить точки останова вручную:

В файлах JS вы можете выбрать некоторый код и использовать контекстное меню:

Вы можете оценитьего значение в определенный момент времени или введите в часы (справа):

, которые затем будут отслеживать его значение во всем коде.