JS中断点调试debug

前端浏览器中debug调试步骤

首先确保项目在浏览器中运行。（这里我是用谷歌浏览器）

1.在浏览器中。F12查看，选择source，搜索要调试的方法代码

2.在代码中正确的位置打上断点

注意打断点不是打在方法名上，而是在方法内部

3.重新跳转页面或点击按钮使方法能运行起来

当使方法再次运行的时候，会看到浏览器正上方放有一个长条状的，其中右侧是一个蓝色按钮和一个灰色的箭头状。这就代表可以调试了。

其中灰色箭头状的F10快捷键功能为“逐语句执行（逐步执行）”，也就是说每点击一次，js语句就会往后执行一句。（有时可能又会跳转到其他的js文件，会很麻烦，这时可以使用蓝色的按钮）

其中蓝色状的F8快捷键功能为“逐过程执行（逐步执行）”，也就是说可以跳过其他的js文件）

当看到方法中第一行代码有了背景色，就代表此方法运行起来了，也就是说能进到这个方法里。
（如果没有出现上面的情况就考虑下是不是选择器错误（使用console解决）？语法错误？被选择的元素是后生成的（使用.on解决，带有事件委托处理））
接下来就看方法内部是否存在逻辑问题？变量问题？参数问题？？？？

如果想看方法内的值是否正确怎么办？

在断点执行到赋值语句时，比如：i++，
先用鼠标选中i++,
再用鼠标悬浮在i++上面，就可以看到值