前端调试bug

一： 断点调试（逻辑异常时使用）
1、在可能出错的位置设置断点
2、启动调试
3、单部执行（F10），观察变量的变化，将变量变化结果与预期结果进行比较，如果结果一致，则继续执行，如果不一致，可能出错。
4、找出出错位置，修改
使用方法：

创建项目(下面的是笔者写的小demo)

text: 0

text+1

在你的项目页面按F12，页面效果如下：

.我们要实现的是+1可是现在的代码是加2是有问题的，我们就在点击事件的那个函数设置断点。当然了。。。我这只有一句话的代码是没有必要设置断点的，一看代码就看到了我后面是+了2，而不是1，一般设置断点在循环或者递归语句当中用的较多，因为可以实时监视变量的变化。断点的使用可在回看文章开头。
.当你设置完断点以后你再次触发你打断点的这个事件就可以看到变量的变化了。
console的注意事项
如果你用的是chrome浏览器开发，当你console变量的时候请注意一下：
如果你要console的是基本类型,比如：字符串，数字，布尔值等等可以直接的console，
但是如果你要是准备console引用类型，比如：对象，数组等就尽量不要直接console，因为你直接console引用类型的话浏览器会帮你把后面求职的结果先console出来，可能你console的这里的这个object并不是这样的，比如说你在后面对object的amount进行了+2的操作，你在前面的地方console出来的就是+2之后的结果，而不是当下的状态值。想要console出当下的状态值需要把它转变下类型，比如我们JSON.stringify一下：console.log(JSON.stringify(object))这样就可以输出当下的object的状态值了。

检测dom事件执行顺序
monitorEvents()

CSS调试：
首先F12打开控制台

或者直接右键你想要检查的内容：
而后选择检查：