Different output of logging an element in Chrome an IE

Question

When I run the below script in Internet Explorer, the output of console.log(target_el) is as expected:

<div class="hidden"></div>

However, in Chrome the output is:

<div class="visible"></div>

Even funnier, the output of console.log(target_el, target_el.className) in Chrome will be:

<div class="visible"></div> "hidden"

Why is that so?

function change_el_class(target_el, target_class) {
  console.log(target_el)
  target_el.className = target_class
}

let el = document.getElementsByClassName('hidden')[0]
change_el_class(el, 'visible')

<div class="hidden"></div>

Code snippet. The dev tools console will show you live output, not a snapshot. — evolutionxbox, Jun 25 '19 at 13:37
@evolutionxbox: please don't use Chrome console, the snippet console works fine for me as well — barciewicz, Jun 25 '19 at 13:37
@Maurice how does that matter? This is an issue with whether the console is printing live objects or not. — Jared Smith, Jun 25 '19 at 13:39
It might be an incompatibility issue. Good ol' IE isn't doing well with javascript. — , Jun 25 '19 at 13:39
@Maurice IE doesn't even *have* `let`. There's no "compatibility issue". — Jared Smith, Jun 25 '19 at 13:40
@JaredSmith yes, that's why it won't change the classname. You answered yourself. — , Jun 25 '19 at 13:40
@Maurice That isn't consistent with the order of events. If it were failing on the line with `let`, the function wouldn't get called at all. — Tyler Roper, Jun 25 '19 at 13:43
@Maurice: but isn't the output in IE something one would actually expect? The class name is logged before the actual change. — barciewicz, Jun 25 '19 at 13:43
Possible duplicate of [Is Chrome's JavaScript console lazy about evaluating arrays?](https://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays) (This is for *arrays* but is applicable) — Tyler Roper, Jun 25 '19 at 13:44
I don't think there is an issue here. IE is correct in its ouput, so is Chrome, but they are logging at different times. — evolutionxbox, Jun 25 '19 at 13:44
@Maurice It isn't too broad at all. You just don't seem to be understanding the question and the answer. Please see this demo in Chrome: https://jsfiddle.net/d2p1hbL8/ - I `console.log()` the array when it has `5` items, right? So why when I expand it in the console does the console show an array of 10 items? This is the root of OP's question. This behavior is present for all objects/arrays in JavaScript + modern browser consoles. — Tyler Roper, Jun 25 '19 at 13:47
Ah, got it. Thank you @TylerRoper. After editing question it is more clear. — , Jun 25 '19 at 13:47

score 4 · Accepted Answer · answered Jun 25 '19 at 13:43

4

Browser logging happens when free time is provided. Means object may be already changed. This behavior especially can be seen in some frameworks like AngularJS.

You can try this:

console.log(JSON.parse(JSON.stringify(target_el)))

or other ways to make deep copy of object.

Different output of logging an element in Chrome an IE

1 Answers1