如何在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小提琴

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

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

Answer 1

在 Chrome 中，您应该使用以下dir方法：

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

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

console.dir($0);?

这会给你一个这样的结果：

Answer 2

您要做的是将属性标签添加到末尾。这将返回一个属性数组。您可能需要 JavaScript 工具包来实际执行此操作，但是无论有多少个属性，您都可以通过一个循环来遍历属性。

sourceAttributes = document.getElementsByTagName('source')[0].attributes
for(int i=0; i<sourceAttributes.length; i++) {
    console.debug(sourceAttributes[i]);
}