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小提琴

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

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

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]);
}

Answer 3

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

Answer 4

HTML 元素属性（类似scrollTopor的东西clientHeight，远远超出 CSS 属性）位于元素选项卡下。

（此选项卡可以在选项卡顺序中非常靠右，因此隐藏在»“更多”选项卡中。您可以通过向左拖动它们来更改 DevTools 选项卡顺序。）

遗憾的是，右键单击“添加要观看的属性路径”的选项（然后显示在常规源选项卡中）不起作用，因为只有属性名称被复制到那里，没有办法选择 HTML 元素（不像宣传的那样) .

因此，您需要手动输入选择机制和属性，例如：

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