javascript - 如何在 Chrome Developer 中查看 DOM 对象的属性？

Question

我想在 Google Chrome Web Developer Tools 中检查 DOM 对象的属性，因此我调用了 console.debug(); 并将 DOM 元素作为参数:

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

但是，Chrome 控制台仅在调用 console.debug(); 时显示元素的 HTML，而不会显示 DOM 节点对象的任何 javascript 属性。

如何在 Chrome Developer 中查看 DOM 对象的属性？我正在使用 Mac。

Answer 1

在 Chrome 中你应该使用 dir 方法:

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

或者对于当前检查/突出显示的元素:

console.dir($0);​

这会给你这样的结果: