脚本调试是 Web 开发者工具箱中最强大和复杂的生产力功能之一。如果做得好，它可以帮助开发者快速有效地修复错误。因此，对于我们 Firefox 开发者工具团队来说，问题是 Firefox 开发者工具是否做对了？

我们一直在倾听来自社区的反馈。最重要的是，我们听到了对更高的 **可靠性** 和 **性能** 的需求；尤其是在现代 Web 应用中。此外，脚本调试是一项难以学习的技能，它应该在不同的浏览器中以类似的方式工作，但由于功能和 UI 的差异，它并不一致。

考虑到这些痛点，开发者工具调试团队 - 在我们勤劳的 开发者社区 的帮助下 - 进行了无数次更新，以设计更有效的调试体验。这项工作仍在进行中，但 Firefox 67 标志着一个重要的里程碑，我们想重点介绍一些出色的改进和功能。我们邀请您 打开 Firefox Quantum：开发者版，在下面的示例和您的项目中尝试调试器，并告诉我们您是否注意到差异。

坚如磐石的调试体验

快速可靠的调试是许多较小交互的结果。从初始加载和源映射到断点、控制台记录和变量预览，一切都需要让用户 感觉 稳固而响应迅速。调试器应该是一致、可预测的，并且能够理解常见的工具，如 webpack、Babel 和 TypeScript。

我们自豪地说，所有 这些领域在过去几个月都得到了改进。

1. 更快的加载时间。我们消除了使调试器打开速度变慢的最糟糕的性能下降。这导致我们的 性能测试套件 速度提高了 30%。我们将在以后的文章中分享更多关于我们性能探索的内容。
2. 出色的源映射支持。一个经过改造且 更快的 源映射后端完美地营造了您正在调试 您的 代码，而不是来自 Babel、Webpack、TypeScript、vue.js 等的编译输出的错觉。
   生成正确的源映射可能具有挑战性，因此我们还为构建工具（例如 babel、vue.js、regenerator）贡献了补丁 - 使整个生态系统受益。
3. 当调试器未处于焦点时降低开销。无需再担心保持开发者工具打开！我们在调试器处于后台时找到了并删除了许多在调试器中运行的昂贵计算。
4. 可预测的断点、暂停和单步执行。我们修复了许多调试器架构中长期存在的错误，解决了与丢失断点、在错误的脚本中暂停或单步执行美化后的代码相关的最常见和最令人沮丧的一些问题。
5. 更快的变量预览。由于我们更快的源映射支持（以及大量额外工作），当您在执行暂停时将鼠标悬停在变量上时，预览现在显示得更快。

这些只是几个亮点。我们还解决了无数的 错误 和 完善 问题。

展望未来

最重要的是，我们必须保持高质量的标准，我们将在我们的计划中明确地留出时间来完善。在用户反馈的指导下，我们打算利用这段时间来改进新功能和现有功能。

其次，对我们的 性能 和 正确性 测试的持续投入确保了不断变化的 JavaScript 生态系统，包括各种框架和编译语言，都得到了我们工具的良好支持。

使用新功能调试所有内容

找到并暂停在正确的位置对于理解错误至关重要。这应该感觉毫不费力，因此我们仔细检查了自己的工具 - 并研究了其他工具 - 以为您提供最佳的体验。

用于精细暂停和单步执行的内联断点

为什么断点应该在行上操作，而行可以包含多个语句？借助内联断点，现在比以往更容易调试压缩的脚本、箭头函数和链式方法调用。了解有关 MDN 上断点的更多信息 或 尝试演示。

日志点结合了控制台和调试器的强大功能

控制台日志记录，也称为 printf() 调试，是一种快速简便的观察程序流程的方法，但它很快就会变得乏味。日志点通过在正在运行的应用程序中动态注入 console.log() 语句来打破这种令人厌烦的编辑-构建-刷新循环。您可以停留在浏览器中并监控变量，而无需暂停或编辑任何代码。了解有关 MDN 上日志点的更多信息。

为 JavaScript 工作线程提供无缝调试

Web 工作线程 为现代 Web 提供动力，需要成为开发者工具中的头等概念。使用新的 线程 面板，您可以在不同的执行上下文中切换并独立暂停它们。这允许在同一个调试器面板内调试工作线程及其脚本，类似于其他现代浏览器。了解有关 MDN 上工作线程调试的更多信息。

源映射的人性化变量名称

调试捆绑和压缩的代码并不容易。由 Firefox 启动和维护的 源映射 项目弥合了在浏览器中运行的压缩代码与其原始的人性化版本之间的差距，但翻译并不完美。通常，压缩构建输出的某些部分会显露出来并打破错觉。我们可以做得更好！

通过将源映射与 Babel 解析器 结合起来，Firefox 的调试器现在可以预览您关心的原始变量，并隐藏来自编译器和捆绑器的无关紧要的内容。这甚至可以在控制台中工作，自动将人性化的标识符解析为它们背后的实际压缩名称。由于它的性能开销，您必须 单独启用此功能，方法是在调试器的 作用域 面板中单击“映射”复选框。阅读 MDN 文档，了解有关 使用映射作用域功能 的信息。

接下来是什么

开发人员经常需要在浏览器之间切换以确保 Web 对每个人都适用，我们希望我们的开发者工具成为一种直观、无缝的体验。尽管浏览器在工具的相同广泛组织方面已达成一致，但我们知道功能和 UI 方面仍然存在差距。为了帮助我们解决这些差距，请 告诉我们您在日常工作中在浏览器之间切换时遇到的哪些问题。

您的意见非常重要

像往常一样，我们很乐意听到您对我们如何改进开发者工具和浏览器的反馈。

• 在 Bugzilla 中提交错误报告
• 在 Firefox 开发者工具 Slack 中与我们聊天
• 在 Mozilla 的 开发者工具讨论区 中分享您的想法和问题
• 在 Twitter 上关注我们 @FirefoxDevTools

虽然所有这些更新将在下周发布的 Firefox 67 中准备好供您试用，但我们在 Firefox 68 中对其进行了完善，并添加了一些新功能。下载 Firefox 开发者版 (68) 立即试用最新的开发者工具和平台更新。