title: Compute all properties of a Vue.js state object in Chrome Devtools console?
body: <p>Whenever I want to inspect some live data on a Vue instance in Chrome I have to click into the object in order to see any data because of how all the values have been converted to getters and setters.</p>
  
  <p><a href="https://i.stack.imgur.com/3jSt0.png" rel="nofollow noreferrer">This</a> image contains an example of what I mean. I had clicked the <code>name</code> property of the object at index <code>0</code> of the array and only then could I see the value as being the string "Perpetual". It is incredibly annoying when I just want to see an overview of my data at a glance.</p>
  
  <p><a href="https://i.stack.imgur.com/iyRdX.png" rel="nofollow noreferrer">Here</a> is an example of what I really want. As you can see, by using <code>JSON.stringify</code> inside of <code>JSON.parse</code> I removed the "observability" from the object and now it can easily be inspected at a glance in the console.</p>
  
  <p>Obviously doing this every single time is even more of a hassle (and also not an options if my data has <code>RegExp</code> objects or other data which isn't JSON compatible) than clicking through the array and clicking object properties I want to compute, but hopefully it helps to show what I'm after.</p>
  
  <p>Somebody please tell me there's a better way to do this. I just want Chrome Devtools to just automatically compute all the values of getters in objects I print to the console so I don't have to click through my data structures all the time in order to get a quick overview of the data.</p>