Chrome Devtools的HTMLDivElement样式属性设置为BEFORE函数调用

Question

我有一个脚本，其功能为addBorder()，该脚本将第一个div的border style属性设置为"2px solid red"。但是当我console.log() div时，在addBorder()的函数调用之前已经添加了 border。

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>

---

以下是控制台在Chrome Devtools中显示的内容： 如您所见，在为addBorder() 调用函数之前和在设置.style属性之前，已经添加了 border。我希望前两个日志为<div>one</div>，最后两个日志为<div style="border: 2px solid red;">one</div>，因为这是设置属性后调用的唯一日志。

也许这是Chrome devtools中的错误，因为它实际上可以按本文中的代码段在stackoverflow控制台中按预期工作。

另一种奇怪的行为-如果我慢慢地逐步通过调试器中的代码，日志看起来会完全不同 ：

但是这里的结果也不是我所期望的，因为最后一个日志显示了div为<div>one</div>且未应用边框样式的原始状态style="border: 2px solid red;"。

这种奇怪的行为是由于代码中的某些缺陷引起的吗？ 还是是Chrome devtools的错误？