Як я можу зробити так, щоб console.log відображав поточний стан об'єкта?

У Safari без додаткових додатків (і насправді більшості інших браузерів) console.logбуде показано об'єкт в останньому стані виконання, а не в стані, коли console.logйого викликали.

Мені доводиться клонувати об’єкт просто для того, щоб вивести його через, console.logщоб отримати стан об'єкта в цій лінії.

Приклад:

var test = {a: true}
console.log(test); // {a: false}
test.a = false; 
console.log(test); // {a: false}

Я думаю, ти шукаєш console.dir().

console.log()не робить те, що ви хочете, тому що він друкує посилання на об'єкт, і до моменту, коли ви відкриєте його, він змінюється. console.dirдрукує каталог властивостей об'єкта в той момент, коли ви його викликаєте.

Нижче наведена ідея JSON; ви навіть можете продовжити розбір рядка JSON і отримати об'єкт, який можна переглянути, як, наприклад, те, що .dir () дасть вам:

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

Що я зазвичай роблю, якщо хочу побачити стан у момент його реєстрації - це просто перетворити його в рядок JSON.

console.log(JSON.stringify(a));

Ванільний JS:

Тут найкраще виглядає відповідь @ evan . Просто (ab) використовуйте JSON.parse / stringify, щоб ефективно зробити копію об'єкта.

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

Специфічне рішення JQuery:

Ви можете створити знімок об’єкта в певний момент за допомогою jQuery.extend

console.log($.extend({}, test));

Що насправді відбувається тут, це jQuery - це створити новий об'єкт із testвмістом об'єкта, і записати його (щоб він не змінився).

Специфічне рішення AngularJS (1):

Кутовий забезпечує copyфункцію, яку можна використовувати для того ж ефекту:angular.copy

console.log(angular.copy(test));

Функція обгортки Vanilla JS:

Ось функція, яка обгортає, console.logале зробить копію будь-яких об'єктів, перш ніж виходити з них.

Я написав це у відповідь на кілька подібних, але менш надійних функцій у відповідях. Він підтримує кілька аргументів і не намагатиметься копіювати речі, якщо вони не є звичайними об'єктами.

function consoleLogWithObjectCopy () {
  var args = [].slice.call(arguments);
  var argsWithObjectCopies = args.map(copyIfRegularObject)
  return console.log.apply(console, argsWithObjectCopies)
}

function copyIfRegularObject (o) {
  const isRegularObject = typeof o === 'object' && !(o instanceof RegExp)
  return isRegularObject ? copyObject(o) : o
}

function copyObject (o) {
  return JSON.parse(JSON.stringify(o))
}

Приклад використання :consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

Це > Objectв консолі, не показує лише поточний стан. Насправді це відкладає зчитування об'єкта та його властивостей, поки ви не розгорнете його.

Наприклад,

var test = {a: true}
console.log(test);
setTimeout(function () {
    test.a = false; 
    console.log(test);
}, 4000);

Потім розгорніть перший дзвінок, він буде правильним, якщо ви зробите це до console.logповернення другого

використовуючи підказку Xeon06, ви можете розібрати його JSON в об’єкті, і ось функція журналу, яку я зараз використовую для скидання моїх об'єктів:

function odump(o){
   console.log($.parseJSON(JSON.stringify(o)));
}

Я визначив утиліту:

function MyLog(text) {
    console.log(JSON.stringify(text));
}

і коли я хочу увійти на консоль, я просто роблю:

MyLog("hello console!");

Це працює дуже добре!

Можливо, ви захочете записати об'єкт у зрозумілий для людини спосіб:

console.log(JSON.stringify(myObject, null, 2));

Це відступає об'єкт з 2 пробілами на кожному рівні.

Як я можу красиво роздрукувати JSON за допомогою JavaScript?

Є можливість використовувати налагоджувальну бібліотеку.

https://debugjs.net/

Просто включіть скрипт на свою веб-сторінку і поставте виписки з журналу.

<script src="debug.js"></script>

Ведення журналів

var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}

Мене можуть зняти за те, що я запропонував це зробити, але це можна зробити ще на крок. Ми можемо безпосередньо розширити сам об’єкт консолі, щоб зробити його більш зрозумілим.

console.logObject = function(o) {
  (JSON.stringify(o));
}

Я не знаю, чи це спричинить якийсь тип бібліотечного зіткнення / ядерного обвалу / розриву в континуумі космічного часу. Але це прекрасно працює в моїх тестах qUnit. :)

Просто оновіть сторінку після відкриття консолі або відкриття консолі, перш ніж надсилати запит на цільову сторінку ....

Просто надрукуйте цілий об’єкт на консолі.

console.dir(object);