Как побороть проблему console.log в JavaScript?

Question

[seredaes]

Вот такая вот проблема.
Получаю в Angular форму. Присваиваю новой переменной объект. Меняю его.
перед этим всем вывожу форму в консоль. И...
В не развернутом состоянии показывает верное значение, в развернутом состояни, значение пароля иное.

console.log(this.signupForm.value);
this.test = this.signupForm.value;
this.test.userpassword_su = '123';

Парень на работе пояснил, что это с памятью связано, ссылка на одну и ту же ячейку идет.
В принципе суть я понял, но вопрос такой:
1. как в ангулар правильно все дебажить и куда выводить переменные, чтобы точно видеть ее состояние, а не этот баг?
2. Мне посоветовали делать не присвоение, а underscore.deepclone, как-то так (я еще не разбирался с этим) может что подскажите?

Заранее всем спасибо!!!

Answer 1

[Camaro67]

Вот почитайте как работают объекты в JS.

Comments

[seredaes]

Спасибо! Почитал и понял!
Когда-то читал.
Правду вот говорят, сначала нужно понимать как работает язык, а после уже браться что-то писать :)

Но вопрос дебагера не раскрыт! :)

[Kovalsky]

seredaes, вопрос дебагера не раскрыт - это как? На вашем скрине я вижу snapshot объекта и его динамически вычисленное состояние, то есть в строке вывода консоли вы видите просто копию того состояния объекта которое было на момент вывода, а при клике просите дебагер показать вам актуальное состояние. В общем всё работает как и положено и проблемы в этой никакой нет, т.к. это всего лишь "старый" лог.

Answer 2

[RidgeA]

не надо бороться с console.log
Надо правильно пользоваться инструментами.

Есть дебагер, который позволяет поставить брейкпоинты в нужном месте кода, остановить код в процессе выполнения и посмотреть что храниться в переменной.

Если уж сильно приспичило вывести в консоль объект, в том состоянии, которе есть в момент вывода можно использовать console.log(JSON.stringify(object, null, 2))

Comments

[seredaes]

Спасибо за ответ.
Я почитал статью.
Теперь копирую не ссылку на объект, а пересоздаю в новой ячейке памяти.
И теперь консоль выводит все правильно :)

console.log(this.signupForm.value);
this.test = <b>Object.assign({}, this.signupForm.value);</b>
this.test.userpassword_su = '123';

[RidgeA]

seredaes, ну бездумно копировать объекты все-же не строит.

Answer 3

[ozknemoy]

console.log слегка асинхронен и иногда показывает устаревшую инфу