How do I view the properties of a DOM object in Chrome Developer?

Question

I want to examine the properties of a DOM object in Google Chrome Web Developer Tools, so I called console.debug(); with a DOM element as a parameter:

HTML:

<audio controls="controls">
  <source src="http://upload.wikimedia.org/wikipedia/commons/6/65/Star_Spangled_Banner_instrumental.ogg" type="audio/ogg" />
  Your browser does not support the audio tag.
</audio>

Javascript:

console.debug(document.getElementsByTagName('source')[0]);​

JS Fiddle

However, the Chrome console just displays the HTML of the element upon the call to console.debug(); and does not reveal any javascript properties of the DOM node object.

How do I view the properties of a DOM object in Chrome Developer? I'm using a Mac. ​

Answer 1

In Chrome you should use the dir method:

console.dir(document.getElementsByTagName('source')[0]);​

Or for the current inspected/highlighted element:

console.dir($0);​

This will give you a result like so:

Answer 2

The HTML element properties (stuff like scrollTop or clientHeight, well beyond CSS properties) are under the elements tab.

(this tab can be very far right within the order of tabs, thus hiding in the » with the “more” tabs. You can change the DevTools Tab-Order by dragging them further left.)

The option on right-click to „add property path to watch“ (then showing up in the general sources tab) is sadly not working, because only the property name gets copied there, no means to select the HTML element (not quite as advertised).

Thus you need to manually enter a selection mechanism and the property there, like:

document.getElementById('123').scrollTop
document.getElementsByTagName('scrollbox')[0]
etc…