How can I make console.log show the current state of an object?

Question

In Safari with no add-ons (and actually most other browsers), console.log will show the object at the last state of execution, not at the state when console.log was called.

I have to clone the object just to output it via console.log to get the state of the object at that line.

Example:

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

Answer 1

I think you're looking for console.dir().

console.log() doesn't do what you want because it prints a reference to the object, and by the time you pop it open, it's changed. console.dir prints a directory of the properties in the object at the time you call it.

The JSON idea below is a good one; you could even go on to parse the JSON string and get a browsable object like what .dir() would give you:

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

Answer 2

What I usually do if I want to see it's state at the time it was logged is I just convert it to a JSON string.

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

Answer 3

Vanilla JS:

@evan's answer seems best here. Just (ab)use JSON.parse/stringify to effectively make a copy of the object.

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

JQuery specific solution:

You can create a snapshot of an object at a certain point in time with jQuery.extend

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

What is actually happening here is jQuery is creating a new object with the test object's content, and logging that (so it will not change).

AngularJS (1) specific solution:

Angular provides a copy function that can be used to the same effect: angular.copy

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

Vanilla JS wrapper function:

Here is an function which wraps console.log but will make a copy of any objects before logging them out.

I wrote this in response to a few similar but less robust functions in the answers. It supports multiple arguments, and will not try to copy things if they are not regular objects.

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))
}

example usage: consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

Answer 4

That > Object in the console, isn't only showing the current state. It actually is deferring reading the object and it's properties until you expand it.

For example,

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

Then expand the first call, it will be correct, if you do it before the second console.log returns

Answer 5

using Xeon06's hint, you may parse his JSON in an object, and here is the log function I now use to dump my objects :

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

Answer 6

There is an option to use a debugger library.

https://debugjs.net/

Just include the script into your web page and put log statements.

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

Logging

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

Answer 7

I defined an utility:

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

and when I want to log on console I simply do:

MyLog("hello console!");

It works very well!

Answer 8

You might want to log the object in a human readable way:

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

This indents the object with 2 spaces at each level.

How can I pretty-print JSON using JavaScript?

Answer 9

There's a new option as of late 2022: Deep copy the object with the new DOM structuredClone method:

console.log(structuredClone(obj))

which uses the same cloning algorithm that's used to transfer messages between web workers.

This should be faster and work with more types of objects than the JSON.parse(JSON.stringify(obj)) technique.

See https://developer.mozilla.org/en-US/docs/Web/API/structuredClone for details.

Answer 10

I may be shot for suggesting this, but this can be taken one step further. We can directly extend the console object itself to make it more clear.

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

I don't know if this will cause some type of library collision/nuclear meltdown/rip in the spacetime continuum. But it works beautifully in my qUnit tests. :)

Answer 11

Simply refresh the page after you open the console or open the console before you submit the request to the targeted page....

Answer 12

Just print whole object on console.

console.log(object);