title: Chrome Devtools, HTMLDivElement style property set BEFORE function called
body: <p>I have a script with the function <code>addBorder()</code> which sets the first div's a border style property to <code>"2px solid red"</code>. But when I <code>console.log()</code> the <code>div</code>, the <em>border is already added before the function call</em> for <code>addBorder()</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;one&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><strong>Here's what the console shows in Chrome Devtools:</strong>
  <a href="https://i.stack.imgur.com/jWoD0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jWoD0.png" alt="enter image description here"></a>
  As you can see, <strong>the <em>border is already added before the function call</em> for <code>addBorder()</code></strong> and before the <code>.style</code> property is set. What I would expect is for the first two logs to be <code>&lt;div&gt;one&lt;/div&gt;</code>, and the last to be <code>&lt;div style="border: 2px solid red;"&gt;one&lt;/div&gt;</code>, since that is the only log called after the property is set.</p>
  
  <p>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. </p>
  
  <p>Another strange behavior- if I slowly <strong>step through the code in the debugger the logs look <em>completely different</em>:</strong>
  <a href="https://i.stack.imgur.com/lQ3Yn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lQ3Yn.png" alt="enter image description here"></a></p>
  
  <p>But the result here isn't what I'd expect either, since the last log shows the original state of with the div, <code>&lt;div&gt;one&lt;/div&gt;</code> without the border style applied- <code>style="border: 2px solid red;"</code>.</p>
  
  <p>Is this strange behavior due to some flaw in my code? <strong>Or</strong> is it a Chrome devtools bug?</p>