Chrome DevTools未显示“已检查”或“ checked =” true” html标记中的属性 [英] Chrome DevTools not showing "checked" or "checked="true" attribute in html tag

问题描述

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

解决方案

复选框有两个关于被检查的属性：一个是HTML / DOM属性，其中一个是脚本对象的属性。 （

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

In the Chrome DevTools, how can you know if a checkbox or radio button is checked. When you click on any of the above, the attribute checked is not showing at all. It's annoying because I have to guess what's happening and it kind make development process slower. Is there some settings I need to apply?

解决方案

A checkbox has two attributes that talk about it being checked: One is an HTML/DOM attribute, and one is a property of the scripting object. (dom-input-checked and attr-input-checked in the spec, respectively).

The spec sometimes uses the word reflect to indicate that these two kinds of attributes are kept in sync, but it does not in this case: The DOM attribute is the default checked state, and the IDL attribute is the current checked state. This allows to "Reset" a form, for instance.

Example of the attributes being different:

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>

Anyway, you can use the "Properties" tab in Chrome's devtools to see the other attribute.

(In Firefox this is under Right click > Show DOM Properties, but you have to select the correct iframe first.)

这篇关于Chrome DevTools未显示“已检查”或“ checked =” true” html标记中的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！