Firefox 开发者版 50 现已推出。它包含许多改进，可帮助您处理脚本启动的网络请求、调整 IndexedDB 数据等等。它还引入了我们一直在期待的功能，所以让我们直接开始吧。

控制台

期待已久的特性终于要加入开发者工具了，但我们需要您在测试的最后阶段提供帮助。由于我们要在发布之前进行测试，因此 源映射 特性目前默认情况下是关闭的。

如果您好奇为什么这是一个如此具有挑战性的问题，James Long 撰写了一篇关于这个问题的精彩文章：在 Firefox 开发者工具中实现更好的源映射的道路上

您想知道解决方案是如何产生的吗？我来转述一下我们自己的 Joe Walker 的说法：

“实习生通常对错误的难度没有足够的了解，有时会一头扎进非常具有挑战性的错误中——也就是说，实习生万岁！”

因此，非常感谢 Firefox 开发者工具的实习生 Jaideep Bhoosreddy 找到了解决方案。

源映射使您可以将所有 JavaScript 文件压缩成一个脚本，从而为用户节省下载时间，或者从其他格式（如 TypeScript 或 CoffeeScript）编译成 Javascript，同时保留对原始文件的引用，因此调试起来不是噩梦。

源映射以前在调试器中受支持，但在控制台中没有支持。这意味着，任何记录的消息的其位置（发出记录的文件和行）都指向已编译的 JavaScript 文件，但如果该文件很长或已缩小，则此位置信息几乎不可用。

现在，这些问题都过去了。控制台现在将显示原始源，而不是已编译的源。您可以在下面的 gif 中看到它在 CoffeeScript 文件中的实际效果

源映射支持目前默认情况下处于关闭状态，可以通过首选项激活。由于不同的工具用于构建源映射文件，因此它们在野外有各种不同的实现，我们希望对不同的变体进行一些初步测试。这就是您发挥作用的地方。

您可以提供帮助

要激活控制台中的源映射支持，请将首选项设置为打开。

• 转到 about:config
• 搜索 devtools.sourcemap.locations.enabled
• 双击该行将值切换为 true
• 关闭并重新打开 Web 控制台

如果您看到任何看起来不对的地方，请在 Twitter 上告诉 @firefoxdevtools 或在 IRC 上的 #devtools 频道 中告诉我们。

网络堆栈跟踪

在 Firefox 开发者版 50 中，控制台现在显示 导致 HTTP 日志消息中网络请求的堆栈跟踪。此功能默认情况下处于打开状态。

内存工具

内存工具现在也默认情况下处于打开状态。这是一个必不可少的工具，用于调试和维护一流的应用程序性能。它可以帮助您查找和修复应用程序中的内存泄漏。如果您想了解更多信息，请查看 MDN 上的文章 或阅读 Hacks 上关于 Firefox 的全新内存工具 的帖子。

网络监视器

在 Firefox 49 中，添加了“原因”列。它显示了如何启动给定的网络请求、其类型以及如果有，导致它的堆栈跟踪。堆栈跟踪气泡 现在显示异步原因帧（XHR、Promise、setTimeout 等），类似于调试器堆栈跟踪面板。

此外，可以通过 单击列标题按其原因对条目进行排序。这可能有助于快速查找所有由 fetch 启动的网络请求，例如。

JSON 查看器

JSON 查看器经过改进，可以更智能地显示数据

• 空数组显示为 []（以前为 [0]），与空对象语法 {} 相匹配。
• 冒号分隔符 现在也显示在对象属性中，与其他属性类型类似。

存储检查器

在 Mike Ratcliffe 和 Jarda Snajdr 为改进存储检查器而做出的全局努力之后，现在可以通过 上下文菜单删除单个 IndexedDB 条目。

about:debugging

服务工作者无疑是 Web 开发的下一个大事件，它提供了一整套工具，您可以使用这些工具来构建功能与原生应用程序相匹配的渐进式 Web 应用程序，包括离线功能和推送通知。
您知道您可以在about:debugging#workers页面中管理注册的服务工作者吗？此页面 现在还显示推送订阅端点，并允许您通过单击按钮发送测试通知。

其他说明

图标：Firefox 50 中所有开发者工具的图标都得到了进一步改进。它们 现在更加一致，看起来非常锋利。

WebAssembly：正如 Luke Wagner 在 之前的博客文章 中所说：

“WebAssembly 是一种新兴的标准，其目标是定义一个安全、可移植、体积小且加载时间效率高的二进制编译器目标，它提供接近本机的性能。”

WebAssembly 文件以前在调试器中受支持，现在它们 已突出显示，使它们看起来更加美观。

最后，一项小但有用的更改：现在可以禁用样式编辑器，如果您不使用它，可以节省一些空间。

至此，我们已经完成了开发者版 50 的概述。立即下载 最新更新，并告诉我们您的想法。最后，我们还要说明一点，本文中介绍的大部分改进都得益于出色的贡献者。感谢大家的努力！

开发者工具使用标准的 HTML、Javascript 和 CSS 编写，因此如果您有任何前端开发经验，也可以参与贡献。如果您想帮助开发者工具变得更好，可以在 http://firefox-dev.tools/ 中找到简单的错误以开始着手。欢迎所有人！