【超实用的控制台推断bug方法】

2. 出现的问题：

2.1 问题1：无论如何点击蓝色按钮，盒子都没有变化

找bug： 在函数的首行console.log(1),测试能否进入事件处理程序（function）

然后浏览器点击蓝色按钮后在控制没有输出1，

那么看24行的按钮有没有获取成功

2.1 解决问题1：第一个按钮获取错误，蓝色按钮是 input[0]

2.2 问题2：已经确保按钮获取成功之后， 然后浏览器点击蓝色按钮后在控制还是没有输出1，

那么证明代码还是无法正确触发点击事件，无法运行到第26行，此时只剩下事件名字没有检查，再认真看

2.2 解决问题2： 事件名click单词写错，把onclcik 修改为 onclick

2.3 问题3：

浏览器点击蓝色按钮后在控制台输出1了，但是再次出现问题：点击蓝色按钮，div盒子仍然没有变化

找bug： 在box.style.backgroundColor = color;这行代码前面输入console.log(box),检查box元素是否出问题

控制台的显示如下图：

2.3 解决问题3：

观看控制台发现，28行打印的是一个伪数组格式的数据，并不是一个标签结构，

所以引发了第29行的报错....'backgroundColor' of undefined...

往前面找到box获取的地方，在第22行代码处，我们是通过getElementsByClassName("box")类名的方式获取元素的，这种方式获取元素，得到的是一个伪数组，伪数组里面存储的才是我们要的dom元素,我们需要通过索引box[0]的方式把dom元素获取出来

所以，把第29行代码，修改为box[0].style.backgroundColor = "red"

或者把第22行修改成 var box = document.getElementsByClassName("box")[0]

3. 原bug代码，大家可以尝试调试一下