Firefox console.table showing wrong data

Question

Let's try the following javascript code:

 var Matrix = [
  [1,2,3],
  [4,5,6]
 ];

  console.table(Matrix);   // print initial data
  Matrix[1][1] = 9;        // change one value
  console.table(Matrix);   // print updated data

And this is the result:

I have tested this with Firefox 64.0. Why do both console.table-calls result to the same output?

That's interesting. So maybe I should ask/report this to Mozilla. — user1511417, Dec 15 '18 at 14:17
Sounds like a bug in `console.table`, but the reason is likely to be that [this is how the console works in general](https://stackoverflow.com/q/23392111/1048572) — Bergi, Dec 15 '18 at 14:17
Okay thanks. If you do find it, feel free to post this as your answer to this question. — user1511417, Dec 15 '18 at 14:22
seems like console.table is buffered. since java-script is asynchronous. also see this thread https://stackoverflow.com/questions/23392111/console-log-async-or-sync above scenario is for console.log seems like the same theory applies for console.table. the reason why you getting this result is it changes the value before it is getting printed. the best way to test that is make an async function and await on each step. — Dulara Malindu, Dec 15 '18 at 15:27

score 0 · Answer 1 · answered Dec 15 '18 at 15:34

console.log is not standardized, so the behavior is rather undefined,

The console will need to store the logged values somewhere, and it will display them on the screen. The rendering will happen asynchronously for sure (being throttled to rate-limit updates), as will future interactions with the logged objects in the console (like expanding object properties).

So the console might either clone (serialize) the mutable objects that you did log, or it will store references to them. The first one doesn't work well with deep objects. Also, at least the initial rendering in the console will probably show the "current" state of the object, i.e. the one when it got logged - in your example you see Object {}. reminding that multi dimensional array is also an object

However, when you expand the object to inspect its properties further, it is likely that the console will have only stored a reference to your object and its properties, and displaying them now will then show their current (already mutated) state.

this answer is influenced by Bergis answer on this question.

…of course we would expect `console.table` to immediately do one level of expanding for logging two-dimensional arrays, so I would still consider this a bug. — Bergi, Dec 15 '18 at 17:12

score 0 · Accepted Answer · answered Dec 15 '18 at 16:34

The console.table is not synchronous so before the initial content of Matrix is displayed, the update is done. Just adding a delay like this and you'll see two values displayed correctly:

var Matrix = [
  [1, 2, 3],
  [4, 5, 6]
];

console.table(Matrix);   // print initial data
setTimeout(() => {
  Matrix[1][1] = 9;        // change one value
  console.table(Matrix);   // print updated data
}, 2000);

This is not practical of course, but looking on the mozilla website it says Note: This feature is available in Web Workers. But the french translation says the feature is available via web workers which would explain the behavior you're seeing.

A workaround would be to call console.table on a deep copy of Matrix so you can carry on modifying it with minimum impact on you final code.

The "*Note: This feature is available in Web Workers.*" means just that, nothing else. The "via" in French seems to be a mistranslation. — Bergi, Dec 15 '18 at 17:11

Firefox console.table showing wrong data

2 Answers2