断点调试
2018-12-18 本文已影响0人
嗨姑娘_大个子
一. 设置代码行断点
chromeK开发者工具：
设置断点.jpg
-
ctrl + shift + i打开chrome的开发者模式。 - 在
Sources选项卡，点击代码行左边的行号，设置行断点，出现蓝色图标。
代码行：
- 直接在代码行中写入
debugger
console.log('b');
debugger;
console.log('c');
二. Breakpoints相关
操作断点.jpg
- 通过Breakpoints 列表，可以快速定位页面中的所有断点；勾选取消列表左侧的复选项去激活获取禁用该断点。
- 可以通过菜单行的第
5个右三角图标，禁用所有的断点。
三. 条件行代码断点
条件断点.jpg
- 右键单击代码行左侧的蓝色断点标记，
Edit breakpoints,代码行会出现 input 输入框。 - 自定义输入表达式，返回值为
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：异常情况自动断点设置。
五. 参考文档
