0

I have a script with the function addBorder() which sets the first div's a border style property to "2px solid red". But when I console.log() the div, the border is already added before the function call for addBorder().

let div = document.querySelector("div");

function log(){
    console.log("before addBorder() called: ", div);  
}

function addBorder(){
    console.log("addBorder() called");
    console.log("before css property set:   ", div);   
    div.style.border = "2px solid red";
    console.log("after:                     ", div);
}

log();
addBorder();
<div>one</div>

Here's what the console shows in Chrome Devtools: enter image description here As you can see, the border is already added before the function call for addBorder() and before the .style property is set. What I would expect is for the first two logs to be <div>one</div>, and the last to be <div style="border: 2px solid red;">one</div>, since that is the only log called after the property is set.

Maybe this is a bug in Chrome devtools, because it actually works as expected in the stackoverflow console for the code snippet on this post.

Another strange behavior- if I slowly step through the code in the debugger the logs look completely different: enter image description here

But the result here isn't what I'd expect either, since the last log shows the original state of with the div, <div>one</div> without the border style applied- style="border: 2px solid red;".

Is this strange behavior due to some flaw in my code? Or is it a Chrome devtools bug?

Dashiell Rose Bark-Huss
  • 2,173
  • 3
  • 28
  • 48
  • 3
    Devtools console contains a pointer to the actual element in all three messages which is why it displays identically. You might want to log out just the property itself. – wOxxOm Feb 03 '19 at 19:50
  • It's not a bug; it's how the console works. Output is live, and updated when the object changes. –  Feb 03 '19 at 19:52
  • @wOxxOm thank you! I have yet to learn about pointers, maybe if I look into those I'll understand this better. Thanks for the suggestion, logging div.style.border instead of div yielded the result I would expect. Thank you. – Dashiell Rose Bark-Huss Feb 03 '19 at 20:01

0 Answers0