title: How do I view the properties of a DOM object in Chrome Developer?
body: <p>I want to examine the properties of a DOM object in Google Chrome Web Developer Tools, so I called <code>console.debug();</code> with a DOM element as a parameter:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;audio controls="controls"&gt;
    &lt;source src="http://upload.wikimedia.org/wikipedia/commons/6/65/Star_Spangled_Banner_instrumental.ogg" type="audio/ogg" /&gt;
    Your browser does not support the audio tag.
  &lt;/audio&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>console.debug(document.getElementsByTagName('source')[0]);​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/PkGj4/" rel="noreferrer">JS Fiddle</a></p>
  
  <p>However, the Chrome console just displays the HTML of the element upon the call to <code>console.debug();</code> and does not reveal any javascript properties of the DOM node object.</p>
  
  <p>How do I view the properties of a DOM object in Chrome Developer? I'm using a Mac.
  ​</p>