JavaScript 调试改进

调试 JavaScript 是开发 Web 应用程序的基本组成部分。拥有高效的调试工具，可以让你在问题出现时更容易地调查和诊断，从而提高生产力。暂停和逐步执行 JavaScript 的能力一直是 Web Inspector 的核心功能。

JavaScript 调试器已经很久没有改变了，但 Web 和 JavaScript 语言却在不断发展。我们最近审视了我们的调试器，以期改进用户体验，使其对您更有用。

单步执行

Web Inspector 现在会为即将执行的活动语句或表达式添加额外的突出显示。对于之前的调用帧，我们突出显示当前正在执行的表达式。

以前，Web Inspector 只会突出显示调试器暂停的行。然而，要知道调试器确切地暂停在该行的哪个位置，以及即将执行什么，可能并不明显。通过突出显示活动表达式的源代码文本范围，我们消除了任何混淆，使代码的单步执行更轻松、更快速。

例如，当单步执行以下代码时，即使我们正在执行较大语句的一小部分，也能立即清楚地看到即将执行的内容

在调用堆栈中查看以前的调用帧时，突出显示表达式也很有用。同样，当选择父调用帧时，总能立即清楚地看到当前正在执行的位置

我们还改进了单步执行行为本身。我们消除了不必要的暂停，添加了以前遗漏的暂停点，并使语言新旧语法之间的暂停位置更加一致。进出函数也更加直观。结合新的突出显示，现在单步执行复杂代码比以往任何时候都更容易。

断点

Web Inspector 现在在解析断点的位置上更智能、更宽容，使它们更一致、更有用。

以前，在空行或带有注释的行上设置断点会创建一个永远不会触发的断点。现在，Web Inspector 会将断点安装在设置断点位置之后的下一个语句上。

我们还简化了为函数或方法设置断点。以前，您需要找到函数内的第一个语句并在此行上设置断点。现在，您只需在包含函数名或其开括号的行上设置断点，断点就会在函数中的第一个语句处触发。

为 console.assert 触发的断言失败添加了一个新的全局断点。此断点可以在现有全局断点旁边找到，例如在未捕获的异常处暂停。

异步调用堆栈

JavaScript 函数使异步评估代码变得非常方便。回调、事件、定时器以及 Promises 和 async 函数等新语言特性，使运行异步代码比以往任何时候都更容易。

调试这类异步链可能很复杂。Web Inspector 现在通过显示跨异步边界点的调用堆栈，使异步代码的调试变得容易得多。现在，当您的定时器触发并在回调中暂停时，您可以看到定时器被调度时的调用堆栈，如果该调用堆栈是异步触发的，则可以继续向上追溯。

WebKit 目前仅在少数地方记录异步调用堆栈，并正在积极将其引入更多功能，例如 Promises。

Web Workers

虽然 JavaScript 本身是单线程的，但 Web Workers 允许 Web 应用程序在后台线程中运行脚本。Web Inspector 现在可以像调试页面中的脚本一样，轻松调试 Worker 中的脚本。

当检查包含 Worker 的页面时，Worker 资源将显示在“资源”选项卡侧边栏中。每个 Worker 都成为像页面一样的顶级资源，让您可以快速查看活动 Worker 及其脚本和资源的列表。

快速控制台中现在提供了执行上下文选择器，允许您选择在页面上下文或 Worker 上下文中评估 JavaScript。Worker 显著改进了 console 日志支持，因此您可以像预期一样与从 Worker 记录的对象进行交互。

设置断点的行为符合预期。当任何单个上下文暂停时，所有其他上下文会立即暂停。在特定线程内选择调用帧允许您仅单步执行该单个线程。使用“继续”调试器控件来恢复所有脚本。

当调试包含 Worker 的页面时，Web Inspector 会在调试器突出显示旁边添加线程名称注释。如果您有多个 Worker，或者甚至有 Worker 和页面，并且它们都暂停并正在单步执行相同的脚本，您将能够准确地看到每个线程的位置。

WebKit 目前仅支持调试 Worker。使用 Timelines 分析 Worker 脚本的功能将在未来推出。

代码覆盖率和类型分析

Web Inspector 还支持 代码覆盖率和类型分析。

以前，Web Inspector 只有一个按钮可以切换两个分析器。现在添加了一个新的 按钮来仅切换代码覆盖率。而 按钮现在仅用于切换类型分析器。

反馈

您可以在最新的 Safari 技术预览版中试用所有这些改进。请告诉我们它们对您的效果如何。您可以在 Twitter (@webkit, @JosephPecoraro) 上发送反馈或提交错误报告。