断点调试

一. 设置代码行断点

chromeK开发者工具：

设置断点.jpg

1. ctrl + shift + i打开chrome的开发者模式。
2. 在 Sources 选项卡，点击代码行左边的行号，设置行断点，出现蓝色图标。

代码行：

1. 直接在代码行中写入debugger

console.log('b');
debugger;
console.log('c');

二. Breakpoints相关

操作断点.jpg

1. 通过Breakpoints 列表，可以快速定位页面中的所有断点；勾选取消列表左侧的复选项去激活获取禁用该断点。
2. 可以通过菜单行的第 5个右三角图标，禁用所有的断点。

三. 条件行代码断点

条件断点.jpg

1. 右键单击代码行左侧的蓝色断点标记，Edit breakpoints,代码行会出现 input 输入框。
2. 自定义输入表达式，返回值为true时候，按Enter键，便可触发此断点。代码行变黄色箭头标志。

四. 操作按钮详解

• 常见断点快捷键

F8: 继续执行
F10: step over, 单步执行, 不进入函数
F11: step into, 单步执行, 进入函数
shift + F11: step out, 跳出函数
ctrl + o: 打开文件
ctrl + shit + o: 跳到函数定义位置
ctrl + shift + f: 所有脚本中搜索

• 右侧操作按钮含义如下：

Pause/Resume script execution：暂停/恢复脚本执行（程序执行到下一断点停止）。
Step over next function call：执行到下一步的函数调用（跳到下一行）。
Step into next function call：进入当前函数。
Step out of current function：跳出当前执行函数。
Deactive/Active all breakpoints：关闭/开启所有断点（不会取消）。
Pause on exceptions：异常情况自动断点设置。

五. 参考文档

• http://web.jobbole.com/95178/
• http://web.jobbole.com/95089/
• https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints
• http://www.cnblogs.com/jingwhale/p/4508774.html