Chrome DevTools在html标签中未显示“ checked”或“ checked =“ true”属性

Question

在Chrome DevTools中，如何知道是否选中了复选框或单选按钮。当您单击以上任意项时，属性checked根本没有显示。这很烦人，因为我必须猜测正在发生的事情，这会使开发过程变慢。我需要应用一些设置吗？

Answer 1

复选框具有两个要检查的属性：一个是HTML / DOM属性，一个是脚本对象的属性。 （在规范中分别为dom-input-checked和attr-input-checked。

规范有时使用单词reflect来指示这两种属性保持同步，但是在这种情况下却不这样：DOM属性是默认的选中状态，而IDL属性是当前检查状态。例如，这允许“重置”表单。

属性不同的示例：

console.log([a.checked, a.getAttribute("checked")]);
a.checked = false;
console.log([a.checked, a.getAttribute("checked")]);

console.log([b.checked, b.getAttribute("checked")]);
b.checked = true;
console.log([b.checked, b.getAttribute("checked")]);

<input type=checkbox id=a checked>
<input type=checkbox id=b>

无论如何，您可以使用Chrome开发者工具中的“属性”标签查看其他属性。

（在Firefox中，在“右键单击”>“显示DOM属性”下，但是您必须先选择正确的iframe。）

Answer 2

现在可以通过首先在Chrome Dev工具中选择输入元素，然后在控制台中编写以下内容来查看是否已选中输入元素：console.dir($0)

可以在属性标签下的Chrome开发工具中查看说明：