Question

我还处于编程的学习阶段，我还有很长的路要走，才能真正做好准备尝试这样做。但我正在练习调试。需要一些帮助来分解如何调试此代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Clicker</title>
  <meta name="description" content="">
</head>
<body>
  <button>Click</button>

<script>
  const counter = {
    cnt: 0,

    inc: function() {
      cnt++;
      console.log(cnt)
    }
  };

  const button = document.getElementsByTagName('button')[0];
  button.addEventListener('click', counter.inc(), false);

</script>
</body>
</html>

Answer 1

您可能希望将JS的最后一行更改为 button.addEventListener('click', counter.inc, false);

当您使用counter.inc()时，您实际上是在立即调用该函数。 addEventListener的第二个参数应该是一个函数，但是你提供了counter.inc()的结果作为第二个参数。

Answer 2

使用JSFiddle - https://jsfiddle.net/xm4rLckk/
在开发者工具中的浏览器中设置断点
使用＆＃34;调试器;＆＃34;陈述 - 这些是断点 - 例如

var cnt = 0; debugger; cnt++; debugger;

Answer 3

也许是这样的：

＆＃13;

  const counter = {
    cnt: 0,

    inc: function() {
      this.cnt++;
      console.log(this.cnt);
    }
  };

  const button = document.getElementsByTagName('button')[0];
  button.addEventListener('click', function(){ counter.inc();}, false);

＆＃13;

<button>Click</button>

＆＃13;

在代码中添加断点以进行调试的最佳位置在哪里？

3 个答案: