title: How can I display all properties of a JavaScript array/object in Chrome?
body: <p>JavaScript has a <a href="http://dreaminginjavascript.wordpress.com/2008/06/27/how-weird-are-javascript-arrays/" rel="nofollow noreferrer">surprisingly confusing distinction</a> between arrays and objects and <a href="http://nfriedly.com/techblog/2009/06/advanced-javascript-objects-arrays-and-array-like-objects/" rel="nofollow noreferrer">array-like objects</a>:</p>
  
  <pre><code>var a = [];  // empty array, right?
  a.foo = 'bar';  // a is also an object
  </code></pre>
  
  <p>The problem is that when inspecting variables in the Chrome DevTools console, it will appear that <code>a</code> is only an empty array:</p>
  
  <p><img src="https://i.stack.imgur.com/wlqwq.png" alt="Chrome is confused by objects/arrays"></p>
  
  <p>This sort of array/object usage happens with <a href="https://github.com/EventedMind/iron-router/blob/c565dbe38780cb645841c2ab2281eef51e45bb83/lib/route.js#L103" rel="nofollow noreferrer">3rd party code</a>, so I'm looking for a way to <strong>show all properties of a variable in Chrome DevTools</strong>.</p>