我想在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]);
但是,Chrome控制台只是在调用console.debug();
时显示元素的HTML,并且不会显示DOM节点对象的任何javascript属性。
如何在Chrome Developer中查看DOM对象的属性?我正在使用Mac。
答案 0 :(得分:4)
您要做的是在最后添加属性标记。这将返回一组属性。您可能需要JavaScript Kit来实际执行此操作,但是无论有多少属性,您都可以通过循环来完成属性。
sourceAttributes = document.getElementsByTagName('source')[0].attributes
for(int i=0; i<sourceAttributes.length; i++) {
console.debug(sourceAttributes[i]);
}
答案 1 :(得分:1)
答案 2 :(得分:1)
console.dir(document.getElementsByTagName('source')[0])
答案 3 :(得分:0)
HTML element属性(类似于scrollTop
或clientHeight
之类的东西,远远超出CSS属性)位于元素标签下。
(此选项卡在选项卡的顺序中可能非常靠右,因此隐藏在带有“更多”选项卡的»
中。您可以通过向左拖动它们来更改DevTools的选项卡顺序。)>
遗憾的是,右键单击“添加要观看的属性路径”(然后显示在“常规来源”选项卡中)的选项无法正常工作,因为只有属性名称被复制到此处,无法选择HTML元素{{ 3}}。
因此,您需要手动输入选择机制及其属性,例如:
document.getElementById('123').scrollTop
document.getElementsByTagName('scrollbox')[0]
etc…