Console.Log Showing Only the Updated Version of the Object Printed

Console.log showing only the updated version of the object printed

You have no problem with the sort but this is a well known peculiarity (an optimization) of most browser consoles : the tree is only built when you open the object, with the new values of the object.

If you want to see the state of the object at the time of logging, supposing it's a small enough and not self referencing object, you may clone it like this :

console.log(JSON.parse(JSON.stringify(annoObj.anno)));

console.log() shows the changed value of a variable before the value actually changes

Pointy's answer has good information, but it's not the correct answer for this question.

The behavior described by the OP is part of a bug that was first reported in March 2010, patched for Webkit in August 2012, but as of this writing is not yet integrated into Google Chrome. The behavior hinges upon whether or not the console debug window is open or closed at the time the object literal is passed to console.log().

Excerpts from the original bug report (https://bugs.webkit.org/show_bug.cgi?id=35801):

Description From mitch kramer 2010-03-05 11:37:45 PST

1) create an object literal with one or more properties

2) console.log that object but leave it closed (don't expand it in the console)

3) change one of the properties to a new value

now open that console.log and you'll see it has the new value for some reason, even though it's value was different at the time it was generated.

I should point out that if you open it, it will retain the correct value if that wasn't clear.

Response from a Chromium developer:

Comment #2 From Pavel Feldman 2010-03-09 06:33:36 PST

I don't think we are ever going to fix this one. We can't clone object upon dumping it into the console and we also can't listen to the object properties' changes in order to make it always actual.

We should make sure existing behavior is expected though.

Much complaining ensued and eventually it led to a bug fix.

Changelog notes from the patch implemented in August 2012 (http://trac.webkit.org/changeset/125174):

As of today, dumping an object (array) into console will result in objects' properties being
read upon console object expansion (i.e. lazily). This means that dumping the same object while
mutating it will be hard to debug using the console.

This change starts generating abbreviated previews for objects / arrays at the moment of their
logging and passes this information along into the front-end. This only happens when the front-end
is already opened, it only works for console.log(), not live console interaction.

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

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

How can I display a JavaScript object?

If you want to print the object for debugging purposes, use the code:

var obj = {
  prop1: 'prop1Value',
  prop2: 'prop2Value',
  child: {
    childProp1: 'childProp1Value',
  },
}
console.log(obj)

will display:

Note: you must only log the object. For example, this won't work:

console.log('My object : ' + obj)

Note ': You can also use a comma in the log method, then the first line of the output will be the string and after that, the object will be rendered:

console.log('My object: ', obj);

Console log before setState prints post update

On the browser, console.log allows you to interactively inspect the objects which are printed out. It does this by keeping a reference to the object it is given, and when the value at that reference changes, the console will reflect those updates, even in past logs.

Because of that, your console is showing you the state of tableData after it's been mutated. (Thanks to Emile Bergeron for clarifying this).

You can avoid this by logging a clone of your object, like so:

const tableDataCopy = { ...tableData };
console.log(tableDataCopy);

Or, if you can't use ES6, or you need a true deep copy, you can do

const tableDataCopy = JSON.parse(JSON.stringify(tableData));
console.log(tableDataCopy);

console.log/console.dir showing last state of object, not current

That's a known issue -- sounds like you are running under Chrome.

The easiest work-around is to JSON encode the value as you log in.

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

Javascript console.log errors: how to see the real object of the Error

Simple solution - log the error object as a property of a plain object

try {
    throw Error("Some error text");
}
catch( error) {
    console.log( {error});
}

This allows you to inspect and expand the structure of an error object in the same way you would any other. Best performed in a browser since code snippets don't provide inspection facilities.

How can I get the full object in Node.js's console.log(), rather than '[Object]'?

You need to use util.inspect():

const util = require('util')

console.log(util.inspect(myObject, {showHidden: false, depth: null, colors: true}))

// alternative shortcut
console.log(util.inspect(myObject, false, null, true /* enable colors */))

Outputs

{ a: 'a',  b: { c: 'c', d: { e: 'e', f: { g: 'g', h: { i: 'i' } } } } }

---

Related Topics