How to view extended objects/arrays in Chrome console?

google-chrome, google-chrome-devtools, javascript

Solution

To see the entire contents of an array (or any other object, for that matter) without writing a loop, you can use `JSON.stringify`. This will output the whole object in JSON format, optionally indenting it.

For example:

console.info(JSON.stringify([{a:1,b:2}, {c:3,d:4}], null, '  '))

will output:

[
  {
    "a": 1,
    "b": 2
  },
  {
    "c": 3,
    "d": 4
  }
]

Problem

When I have array of objects, when I type the name of variable in Chrome console, I get this: QUESTION: Is there some option or a flag which when turned on would display the objects and arrays extended when queried in Chrome console ? I use the console a lot and do inline operations within the console and each time when I modify an array I have to click on all entries to see the values. I do not want to write a loop which would `console.dir` out all the arrays.

Original source