断点调试

252 阅读1分钟

一. 设置代码行断点

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:异常情况自动断点设置。

五. 参考文档