Is there a way to prevent automatic sorting in the Chrome console?

Question

I'm dealing with a bug that is a result of the order of properties in an object. Yes perhaps it would be better to use an array in this case but that's not the point of this question.

When I print out the object to the console, it is automatically sorted for me, which is annoying in this case.

In this screenshot you see that the immediate preview (grey text on top) is not sorted, but when you open the object, it is sorted.

The same goes for the inner properties. Take note of the item "0.180 - 0.299" in the above screenshot, and how it's properties are not sorted properly in the immediate preview. But when we open them they are:

Usually this is convenient but I was wondering if there was a way to disable this feature temporarily.

Here's how it looks in the React dev tools:

i think Object property order is not in the ES spec, so you shouldn't make assertions about it — William B, Feb 28 '18 at 18:00
Not for numeric keys, according to https://stackoverflow.com/a/5525812/1427878 — CBroe, Feb 28 '18 at 18:16
JSON.stringify per Mike's answer does the trick, though it's not as nice as being able to able to collapse properties — Dylan, Feb 28 '18 at 18:36

Amos47 · Answer 1 · 2018-02-28T18:50:58.240

1

I think it may actually be how chrome stores and fetches the object. I can't seem to prove that it actually stores the order of the object. What made you determine that it was storing it differently?

const a = { 2: {d: 1, e:1, a:1}, 3: {d: 1, e:1, a:1}, 1: {d: 1, e:1, a:1}};
const keys = Object.keys(a);
for(let key of keys){
  console.log(key)
  console.log(a[key]);
  for(let embeddedKey of Object.keys(a[key])){
    console.log(embeddedKey);
  }
}

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

console.log('---- underscore stuff ----');

_.each(a, (val, key) => {
  console.log(key);
  console.log(val)
  _.each(val, (embeddedVal, embeddedKey) => {
    console.log(embeddedKey);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Edit: Changed the script to show that it is in fact already sorted when numbers are used, but not when strings are used.

The solution is to therefore use strings as keys for when you need to preserve the order. You will need to use some special formatting so it's not seen as a number.

let a = {"2n": {b: 1, a: 1}, "1n": {d: 1, c:1}};

console.log(a);

edited Feb 28 '18 at 18:50

answered Feb 28 '18 at 18:11

Amos47

695
6
15

The text below state.pricingData is in this order in the preview (before opening object) : 0.180..., 0.230..., 0.040.... so I thought maybe that was stored somewhere as its initial order. I'm adding an image in the OP that depicts what it looks like in the React dev tools. – Dylan Feb 28 '18 at 18:14
I see what you are saying, but how are you even iterating over the object where it's not sorted? When I use Object.keys it's still iterating over the sorted object. – Amos47 Feb 28 '18 at 18:22
I'm using underscore.js (_.each). The source for that can be found here and it doesn't use Object.keys as far as I can see: http://underscorejs.org/docs/underscore.html – Dylan Feb 28 '18 at 18:25
I updated my solution. I think I see what's going on. – Amos47 Feb 28 '18 at 18:51
1

Duplicate anser has the right solution. – Amos47 Feb 28 '18 at 18:53
Yeah the duplicate answer solves the problem of the console message (the actual posted question) but your answer will help with tackling the actual bug so thank you. – Dylan Feb 28 '18 at 18:56

Is there a way to prevent automatic sorting in the Chrome console?

1 Answers1