如何在Chrome Developer中查看DOM对象的属性?

时间:2012-07-08 04:14:51

标签: javascript google-chrome-devtools

我想在Google Chrome Web开发者工具中检查DOM对象的属性,因此我使用DOM元素作为参数调用console.debug();

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。

4 个答案:

答案 0 :(得分:4)

您要做的是在最后添加属性标记。这将返回一组属性。您可能需要JavaScript Kit来实际执行此操作,但是无论有多少属性,您都可以通过循环来完成属性。

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

答案 1 :(得分:1)

在Chrome中,您应该使用dir方法:

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

这将为您提供如下结果:

enter image description here

答案 2 :(得分:1)

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

答案 3 :(得分:0)

HTML element属性(类似于scrollTopclientHeight之类的东西,远远超出CSS属性)位于元素标签下。

(此选项卡在选项卡的顺序中可能非常靠右,因此隐藏在带有“更多”选项卡的»中。您可以通过向左拖动它们来更改DevTools的选项卡顺序。)

enter image description here

遗憾的是,右键单击“添加要观看的属性路径”(然后显示在“常规来源”选项卡中)的选项无法正常工作,因为只有属性名称被复制到此处,无法选择HTML元素{{ 3}}。

因此,您需要手动输入选择机制及其属性,例如:

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

(not quite as advertised)