Bug in JavaScript Google Chrome console when printing object

Question

For some reason, printing an array of objects in console.log() doesn't print each object correctly.

When I loop through the array for each individual object and print its property I am interested in, it differs from the object being printed in the array. I performed this check before and after I print the array of objects with the check having matching property values while sometimes differing with the array.

What could be some reasons for this? I am happy to give more details but I'm not sure what is relevant to this problem.

for(let i = 0; i < activeMonsters.length; i++) {
    console.log("Before: " + i + "|" + activeMonsters[i].xPos);
    // console.log(activeMonsters[i]);
}
console.log(activeMonsters);
for(let i = 0; i < activeMonsters.length; i++) {
    // console.log(activeMonsters[i]);
    console.log(i + "|" + activeMonsters[i].xPos);
}

Answer 1

It is not a bug, console.log() works as per design. If I understand correctly you want to see Objects in details for that use:

Option 1:

console.dir() to print browserable Object in chrome console.

For more information please check here : https://developer.mozilla.org/en-US/docs/Web/API/Console/dir

Option 2:

console.log(JSON.stringify());

This should also give you browserable Object.