Firefox DevTools 回顾

2017 年对于 Firefox DevTools 来说是重要的一年。我们更新和优化了 UI，重构了三个面板，修复了无数错误，并发布了多个新功能。这些工作不仅带来了更快速、更优质的 DevTools 体验，也为 2018 年及以后的激动人心的新功能和改进奠定了基础。我们始终致力于打造能够帮助开发者使用最新技术和标准构建网站的工具和功能，包括 JavaScript 框架，当然还有 CSS Grid。

为了更好地了解我们 Firefox DevTools 的发展方向，让我们快速回顾一下过去。

2016

2016 年，DevTools 团队启动了一项雄心勃勃的计划，将 DevTools 完全从 XUL 和 Firefox 特定 API 过渡到现代 Web 技术。第一个诞生的项目是 debugger.html。

debugger.html 不仅仅是旧版 Firefox 调试器的迭代版本。团队抛弃了一切，创建了一个空的仓库，并着手从头开始构建一个调试器，该调试器利用可重用的 React 组件和 Redux 存储模型。

这种现代架构的优势马上就显现出来。一切变得更加可预测、易于理解和可测试。这种方法也让 debugger.html 不仅仅局限于 Firefox。它可以针对其他平台，例如 Chrome 和 Node。

我们还在 2016 年发布了新的 响应式设计模式 (RDM)，该模式只使用现代 Web 技术构建。

2017

去年，我们继续在 2016 年开始的工作基础上，构建和重建 Firefox DevTools 的部分功能（并在过程中添加新功能）。结果，我们的开发者工具变得更快、更可靠。我们还推出了 Firefox Quantum，专注于浏览器速度和性能。

调试器

2016 年开始的 debugger.html 工作已 随 Firefox 56 发布到所有频道。我们还添加了几个新功能和改进，包括更好的搜索工具、折叠框架调用堆栈、异步单步执行等等。

控制台

与 debugger.html 一样，我们也随 Firefox Quantum 发布了全新的 Firefox 控制台。它拥有新的 UI，并使用 React 和 Redux 从头开始重写。这款新的控制台包含几个新的改进，例如能够折叠日志组，以及能够在上下文中检查对象。

网络监视器

我们还在 Firefox 57 的所有频道发布了 新的网络监视器。这款新的网络监视器拥有新的 UI，并且（你猜对了）使用 React 和 Redux 等现代 Web 技术构建。它还拥有更强大的过滤器 UI、新的 Netmonitor 列等等。

CSS Grid 布局面板

Firefox 57 随附 新的 CSS Grid 布局面板。CSS Grid 正在彻底改变 Web 设计，我们希望为设计师和开发者提供强大的工具来构建和检查 CSS Grid 布局。你可以 在这里阅读有关面板功能的所有信息；亮点包括用于可视化网格的叠加层、交互式网格轮廓、显示网格区域名称等等。

Photon UI

我们还对 DevTools 主题进行了 完整的视觉更新，以配合 Firefox Quantum 和新的 Photon UI 的发布。这次更新带来了干净、简洁、易于阅读的设计。

2018 年及以后

所有这些工作都为 Firefox DevTools 打下了激动人心的未来。通过利用现代 Web 技术，我们可以比依赖 XUL 和 Firefox 特定 API 时更快地创建、测试和部署新功能。

那么接下来是什么？不剧透太多，以下是我们关注的一些领域。

更强大的布局和设计工具

现在是 2018 年，在绘图程序中制作的静态设计正被更现代的工具所超越！在浏览器中进行设计使我们能够自由地进行实验、创新和更快地构建。在过去一年里，我们与数百名开发者进行了交流，了解到他们迫切希望在浏览器中引入更好的设计工具。

我们对围绕 CSS Grid 布局面板的压倒性积极反馈感到激动，我们也听到了你们对更多有助于设计、构建和检查布局的工具的呼声。

我们正在制作 Firefox Inspector 工具，以更轻松地编写 Flexbox 代码。你最希望它做什么？你使用 Flexbox 时最难的是什么？
– @jensimmons，2017 年 11 月 14 日

我对 Firefox 网格检查器产生的这种反应感到非常高兴。这是我们的计划。我们才刚刚开始。2018 年将推出更多超级实用的布局工具。
– @jensimmons，2017 年 11 月 24 日

更强大的框架工具

2017 年是 JavaScript 框架的丰收年，例如 React 和 Vue。还有一些老牌框架，例如 Angular 和 Ember，它们仍在不断发展和改进。这些框架正在改变我们构建 Web 的方式，我们也有一些想法，可以帮助 Firefox DevTools 更好地为使用框架的开发者提供支持。

更优质的 UI

对 Firefox DevTools UI 的工作永远不会停止。我们相信总有改进的空间。我们将继续与 Firefox 开发者社区合作测试和发布改进。

新的 DevTools 投票：你喜欢这三种工具栏布局中的哪一种用于网络面板？
– @violasong

GitHub 上更多项目

我们在开始 构建 debugger.html 时尝试了一些新方法。我们决定在 GitHub 中构建这个项目。我们不仅找到了许多新的贡献者，还收到了很多关于代码易于定位、管理和操作的积极反馈。今年我们将寻找更多机会将我们的项目带到 GitHub，敬请期待。

参与进来

有想法吗？发现了错误吗？有（惊呼）投诉吗？我们将在进入 2018 年后密切关注 DevTools 用户，我们希望听到你的声音。以下是一些你可以加入我们社区并参与其中的方式。

加入我们的 Slack

你可以加入我们的 devtools.html Slack 社区。我们也会在 irc.mozilla.org 上的 #devtools 频道闲逛。

关注我们的 Twitter

我们有一个你可以关注的官方账号，但你也可以关注不同的团队成员，他们偶尔会分享想法并征求反馈。在这里关注 @FirefoxDevTools。

贡献

如果你想亲自动手，可以成为贡献者。

开放错误列表
GitHub

下载 Firefox 开发者版

Firefox 开发者版 专为开发者打造。它提供我们为 2018 年计划的所有重大新功能的抢先体验。

感谢所有迄今为止做出贡献的人。你们的推文、错误报告、反馈、批评和建议对我们来说非常重要，意义重大。我们希望你在 2018 年与我们一起继续努力，为开发者打造出色的工具。