5

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?

Shaoz
  • 10,573
  • 26
  • 72
  • 100

2 Answers2

16

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.

enter image description here

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

Josh Lee
  • 171,072
  • 38
  • 269
  • 275
  • 1
    Thanks for the response. But normally whatever happens in the DOM, the devtools usually shows that something is happening, e.g. show/hide with a class, devtools will show that a class is added or removed. I want something similar for when you clicked a checkbox/radio, there should be `checked` or `checked="true|false"` in real-time, right? unless I'm expecting too much from devtools. – Shaoz Aug 08 '18 at 16:02
  • 2
    Yes, the DOM spec says _The className attribute must reflect the "class" content attribute._ But since `checked` doesn't, you must go to the properties tab. You can't see something that's not a DOM attribute in the place where DOM attributes are shown. – Josh Lee Aug 08 '18 at 16:05
  • So there's really no way at the moment to see a real-time update of `checked` in DevTools. Cool. Thanks for your lesson and help. – Shaoz Aug 09 '18 at 08:48
  • 1
    The 'hidden' attribute is especially problematic. Elements with 'hidden' set don't appear in the Elements view, so you can't select them there, therefore you can't access the Properties tab for those elements! – brennanyoung Feb 22 '19 at 13:23
1

It´s now possible to see if the input element is checked or not by selecting it first in the Chrome Dev tool and afterwards write the following in the console: console.dir($0)

The instructions can be seen in the Chrome Dev tool under the properties tab:

enter image description here

IceCode
  • 1,466
  • 13
  • 22