使用控制台调试 JavaScript

Question

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

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

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);
};

Answer 2

您在这里登录的意思很可能是 square1.style.width。 console.log(grow()) 将始终 return 未定义，因为你的函数 return 什么都没有。

使用控制台调试 JavaScript

Using the Console to Debug JavaScript

javascript

css

debugging

console.log