console.table data is affected by later alterations

UNCONFIRMED
Unassigned

Status

P3
normal
UNCONFIRMED
2 years ago
6 days ago

People

(Reporter: dxcqcv, Unassigned)

Tracking

50 Branch

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments)

(Reporter)

Description

2 years ago
Created attachment 8822394 [details]
fx-consoleTable-bug.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20161130210124

Steps to reproduce:

Sort a array like

const inventors =[ 
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
{ first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
{ first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
{ first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
{ first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
{ first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
                 ];

                 const ordered = inventors.sort((a,b)=>a.year>b.year ? 1: -1);
                 console.table(ordered)


Actual results:

Only display old order


Expected results:

Show new order
(Reporter)

Comment 1

2 years ago
Created attachment 8822396 [details]
fx-consoleTable-bug01.png

Comment 2

2 years ago
Created attachment 8822474 [details]
1326182.html

Comment 3

2 years ago
Created attachment 8822475 [details]
screenshotFF50win7.jpg

WFM with FF50 on Win 7, the table is displayed sorted by "year"

Updated

2 years ago
Component: Untriaged → Developer Tools: Console

Updated

2 years ago
Duplicate of this bug: 1326256
(Reporter)

Comment 5

2 years ago
I think it's console.table bug so did not check other first.

Comment 6

2 years ago
I don't understand what the bug is here.
When I try the attached test, I get the results I expect: a table sorted by year.
Can you say what is wrong?  Otherwise I think we should simply close this.
Flags: needinfo?(dxcqcv)

Comment 7

2 years ago
I'm experiencing this bug as well, but it requires different code. This example is from a JS exercise series, and the original starter file has a second `.sort()` function in the same file that seems to cause the issue.

See below. Even though the `console.table()` function is used on the `firstSort`, in FF it displays the `secondSort`. I'm using v52.0.1.

```
const inventors =[
  { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
  { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
  { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
  { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
  { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
  { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
  { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
  { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
  { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
  { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
  { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
  { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];

// Sorts inventors by birth year.
const firstSort = inventors.sort((a, b) => a.year > b.year ? 1 : -1);

console.table(firstSort);

// Sorts the inventors by years lived
const secondSort = inventors.sort(
  (a, b) => {
    return (a.passed - a.year) > (b.passed - b.year) ? -1 : 1;
  }
);
```

Comment 8

2 years ago
Ok, thanks.

My theory for what is going on here is that the table is not rendered -- and in particular the
table elements are not gathered -- until after the entire pasted code has completed.
And, because |sort| sorts in-place, firstSort and secondSort are identical, so the
display is unexpected.

I think there's another bug open about this sort of problem with console.log.

Clearing the needinfo because I think I understand the bug now.
Flags: needinfo?(dxcqcv)
Steps to reproduce:
1. Open the console
2. Evaluate : 
```
x = [1,2,3];
console.table(x);
x.push(4);
console.table(x);
```


Expected results:

I should see 2 tables, one with 3 elements, one with 4 elements

Actual results:

The 2 tables are the same, and contains 4 elements (first console.table is erroneous)

---

This does not happen with console.log
Priority: -- → P3
Summary: Display wrong order after use two sorted function in console.table → console.table data is affected by later alterations

Updated

3 months ago
Product: Firefox → DevTools
Duplicate of this bug: 1492558
You need to log in before you can comment on or make changes to this bug.