Консоль Chrome Developer Tools - укладка журналов, как я могу увидеть перезаписанные материалы [Скриншот внутри]?

Question

Я только начал использовать консоль в Chrome Developer Tools (довольно плохо знаком с Javascript в целом).Я заметил, что когда я последовательно записываю в журнал одну и ту же переменную дважды (в данном случае это объект), журнал записывает это в стек и размещает рядом значок с небольшим числом.Я нажимаю на это, думая, что я смогу увидеть объект дважды (так как он был дважды обновлен), однако ничего не происходит.

Изображение для более ясного объяснения:

Как видите, в синем круге рядом с выпадающим списком Object есть маленькая цифра "2".Первый журнал имел бы Object.num в 3, а второй в 4, однако все, что я вижу, это второй.

Любые ответы относительно того, как увидеть оба журнала, будут оценены.

:.)

Answer 1

Это происходит потому, что вы регистрируете один и тот же объект дважды. Даже если это не приведет к суммированию, вы увидите, что «num» равно 4, поскольку консоль не - насколько мне известно, по крайней мере - захватывает копии объектов, которые вы регистрируете. Это иногда несколько неудобно, я согласен.

Один из способов, с помощью которого я только что подумал о том, что вы получите отдельные журналы - но с дополнительным использованием памяти - это сделать что-то вроде

console.log(JSON.parse(JSON.stringify(obj)));

(Это должно сработать, по крайней мере.) Если ваш объект относительно прост для интерпретации на глаз, вы можете просто пропустить JSON.parse там и использовать строковую форму JSON вашего объекта для регистрации.

Я также предлагаю взглянуть на оператор debugger; - всякий раз, когда он встречается в программе JS, он заставляет среду останавливать выполнение кода и вызывать отладчик сценариев. Это может или не может быть более подходящим для того, что вы отлаживаете.

Answer 2

Согласно документации , стек сообщений можно отключить, включив метки времени в общих настройках консоли:

Answer 3

Эта пользовательская функция log будет регистрировать «снимок» объекта, поэтому в вашем примере вы увидите обновленное свойство «num» вашего объекта, отражаемое при каждом вызове log.

Это своего рода читы, вручную регистрирующие каждое свойство объекта в «консольной группе». Но в итоге он выглядит довольно близко к обычному выводу console.log (без странного поведения, на которое вы указали в своем вопросе).

Кроме того, возможно, он работает только в Chrome.

function log(obj) {
    console.groupCollapsed(({}).toString.call(obj).split(' ')[1].split(']')[0]);
    for (var k in obj) obj.hasOwnProperty(k) && console.log(k + ': ', obj[k]);
    console.log('__proto__: ', obj.__proto__);
    console.groupEnd();
}​

Попробуйте это здесь .

---

Отличный вопрос, кстати. Я только что многое узнал о консоли, которую не знал раньше :)

Answer 4

Это случилось со мной и раньше. Единственное решение, которое я смог найти, - вывести что-то среднее между двумя выходными вызовами. Так, например, если у вас есть это:

console.log(var);
...
console.log(var);

сделай это:

console.log(var);
console.log('asdf');
...
console.log(var);