断点选项

Michael Abrash 在其关于图形和汇编语言的经典著作中写道：“最好的优化器在你耳中”。最好的调试器也在你耳中，最好的开发工具应该提供强大而灵活的功能，以帮助开发人员分析程序流程并定位错误。

Web 检查器提供了许多用于自定义断点的选项，其中许多对于 Xcode 和 Microsoft Visual Studio 等现代 IDE 的用户来说会很熟悉。本文将重点介绍调试器选项卡、使用条件和操作自定义断点以进行日志记录和执行脚本，以及创建探测表达式。

调试器选项卡

调试器选项卡的左侧边栏按源文件列出断点，包括两个全局断点，用于在抛出异常时自动暂停。

以下选项用于过滤断点列表

启用/禁用所有断点	⌘Y	打开或关闭所有断点，包括全局断点
断点过滤器		仅显示带有断点的脚本
问题过滤器		仅显示带有异常、控制台错误和警告的脚本
文本过滤器		仅显示与筛选文本匹配的文件

断点在侧边栏或文本编辑器中的颜色反映其当前状态

	已启用	默认
	自动继续	断点在评估时不会暂停调试器
	已禁用	断点将不被评估
	不活跃	未解析的断点，或所有断点都已禁用

右键单击侧边栏或源代码视图的行号槽中的断点会打开断点编辑器。从这里，我们可以通过设置条件和操作来自定义断点的运行时行为。

条件断点

条件断点仅在指定的条件表达式评估为 true 时触发。该表达式在断点的作用域内进行评估。条件字段支持 JavaScript 内置类型的自动补全。

断点评估还可以通过设置忽略次数来控制，这会导致调试器在停止之前忽略断点若干次。这两种情况在调试在循环内运行的代码以及频繁触发的事件回调时都很有用。

如果同时指定了忽略次数和条件表达式，则忽略次数优先。为了演示，请考虑循环体中的以下断点

for (var i = 0; i < 10; ++i) {
   // do some work
}

断点操作针对 i 的奇数值触发，从第六次循环迭代开始。运行程序会产生以下控制台输出

5
7
9

断点操作

停止脚本执行以检查程序状态并不总是实用的。在调试器中反复暂停可能会分散注意力，在调试鼠标事件处理程序或异步回调时，甚至可能引入意外的程序行为。断点在触发时可以运行一个或多个操作，而不仅仅是暂停当前脚本。

1. 右键单击断点并选择 Edit Breakpoint
2. 点击“添加操作”
3. 设置新操作的类型
4. 设置为自动继续以避免在调试器中暂停
5. 可选。添加更多操作

以下操作可用

日志消息	默认。将纯文本消息记录到控制台
评估 JavaScript	直接在被检查页面中执行自定义 JavaScript
播放声音	蜂鸣
探测表达式	采样表达式的值

评估 JavaScript

“评估 JavaScript”操作是一个强大而灵活的工具。与条件表达式一样，脚本操作可以访问断点作用域中的任何变量、函数和对象。脚本操作通常用于将数据记录到控制台，但它们可以做更多的事情。

脚本操作可用于在运行时修改程序状态、输出当前调用堆栈、测量执行时间，甚至记录时间线分析。Console API 包含许多非常适合这些任务的函数

console.log(a, b, ...)	将参数输出到控制台
console.profile(name)	开始分析（创建时间线记录）
console.profileEnd()	停止分析
console.table(object)	将对象输出到控制台，格式为表格
console.time(name)	启动计时器
console.timeEnd(name)	停止计时器，将时间戳输出到控制台
console.trace()	将调用堆栈输出到控制台

探测表达式

探测表达式使得在交互式程序中观察状态变化变得容易，而不会被调试器中断或筛选控制台输出。添加“探测表达式”操作会创建一个断点探测，其中可以包含多个表达式。

在下面的示例中，一个包含两个探测表达式的断点已添加到俄罗斯方块游戏的 keydown 处理程序中

创建断点后，一个“探测”面板会添加到调试器的右侧边栏。每次评估断点时，探测样本都会在运行时添加到数据表中

可以直接从侧边栏编辑探测，无需打开“编辑断点”对话框。侧边栏面板中每个探测条目都有一个包含以下命令的工具栏

	添加新的探测表达式（创建断点操作）
	清除探测样本
	删除探测（移除相关联的断点操作）

结论

调试器侧边栏正在积极开发中，我们目前正在探索组织断点的新方法，以使调试工作流程更顺畅。

最新功能和增强可以在 WebKit 每夜构建版中找到。通过在 Twitter 上向我们发送反馈（@xeenon、 @jonathandavis、@matt_a_baker）， 或提交错误报告来帮助我们使 Web 检查器变得更好。