javascript - 使用控制台调试 JavaScript

Question

我正在尝试更好地使用控制台调试我的 JS 代码，但我不太确定我是否正确登录到控制台。

这里有一个小代码示例来说明。在这个例子中，如果你点击黑色方 block ，宽度就会改变。现在代码可以正常工作，因此控制台中不应显示任何内容，但是当需要测试新代码时，我是否正确记录了它？

HTML:

<div id="square1"></div>

CSS:

#square1
{
  height: 10px;
  width: 10px;
  background: black;
}

JS:

var square1 = document.getElementById("square1");

square1.onclick = function grow()
{
 if(square1.style.width=="10px")
 {
    square1.style.width="20px";
 }
 else
    {
        square1.style.width = "10px";
    }
 };

 console.log(grow());

Answer 1

如果你想记录点击后的最终宽度，你应该使用:

square1.onclick = function grow()
{
 if(square1.style.width=="10px")
 {
    square1.style.width="20px";
 }
 else
 {
    square1.style.width = "10px";
 }

 console.log(square1.style.width);
};