Chrome调试技巧【JS断点调试篇】

一、断点调试

1、设置代码行断点

方法一： chrome调试工具

方法二：代码行直接输入 debugger 

当代码执行到此处时会自动停住

2、条件行代码断点

（1）右键点击设置的断点，选择 Edit breakpoint...

（2）输入执行断点的条件表达式，当表达式为 true 时断点调试才会生效。有了条件断点，我们在调试代码的时候能够更加精确地控制代码断点的时机

设置完成后断点标识会变为橘色

例如上图，当 i==5  时才会触发此次断点

3、错误捕获断点

下图是模拟的一个js代码报错的情况

因为有时可能因为项目过于复杂庞大，错误信息过多，代码执行的的先后顺序难以确定，以致于无法准确设置断点。
此时最好的方式就是当代码执行时可以自动断点在报错的地方。。

如上图点击右上角类似播放按钮，然后刷新页面，则js代码执行会停在js报错的地方，此时就可以更好的定位报错原因
个人觉得该调试方式在调试各种疑难错误时非常有用。

二、Call Stack调用堆栈

界面介绍

（1）当断点执行到某一程序块处停下来后，右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈，从上到下由最新调用处依次往下排列。

（2）Call Stack 列表的上方是 Scope 列表，可以查看此时局部变量和全局变量的值，也能查看代码执行到此时产生了多少闭包

使用技巧

调试时当前调用在哪里，Call Stack 列表里的箭头便会指向哪里。同时当我们点击调用栈列表上的任意一处，便会调到相应的位置，方便我们再回头去看看代码，也方便监控变量时如何变化的。

三、其他调试按钮

常见按钮快捷键

 F8  : 继续执行
F10  : step over, 单步执行, 不进入函数
F11  : step into, 单步执行, 进入函数
     shift + F11  : step out, 跳出函数

调试按钮含义如下：

      Step over next function call  ：执行到下一步的函数调用（跳到下一行）。等同于 F10 
     Step into next function call  ：进入当前函数。等同于 F11  :
     Step out of current function  ：跳出当前执行函数。等同于      shift + F11  :