Why don't browser developer tools display input field values?

Question

When I inspect an input field that has a value, the value appears empty in the debugger like this:

I was just wondering why? Debugger performance? Or perhaps something related to security? Or maybe I need to switch something on/off?

The reason why I am wondering is that it makes debugging more difficult for me in certain situations, like right now when the field loads empty while console logged .value returns the value that is supposed to load but didn't for some reason:

console.log( 'before LoadFromLocalStorage' );
console.log( 'input element:' );
console.log( document.getElementById( 'email' ) );
console.log( 'input element value:' );
console.log( document.getElementById( 'email' ).value );



document.getElementById( 'email' ).value = sessionStorage.email;


console.log( 'after LoadFromLocalStorage' );
console.log( 'input element:' );
console.log( document.getElementById( 'email' ) );
console.log( 'input element value:' );
console.log( document.getElementById( 'email' ).value );

P.S. it actually shows up in the field when I set timeout long enough. 1ms is enough in about 75% of tests, but sometimes it fails to show up even with 100ms timeout. So apparently something is going on during that time, but I have no idea what. It would be really nice if I could log when it actually appears in the input field.

---

EDIT:

I solved the problem with the empty input field. I used element.innerHTML += "a lot of html" elsewhere in my code and due to its destructive nature it wiped all the input fields before it completed appending html. I replaced it with .insertAdjacentHTML and it worked like a charm.

Answer 1

You're looking in the wrong place.

The value attribute represents the default value, which you aren't modifying.

The current value appears in the DOM value property.