我们刚刚发布了 Firefox 65，其中包含许多新的开发者功能，使您更轻松地创建、检查和调试网页。

在本次新版本中，开发者工具中包含的所有功能和错误修复中，我们想重点介绍两个功能：

• 全新的 Flexbox Inspector
• 更智能的 JavaScript 检查和调试

我们希望您像我们和社区一样喜欢使用这些工具。

以前所未有的方式理解 CSS 布局

Firefox 开发者工具团队致力于帮助您掌握 CSS 布局。我们希望您能从“尝试直到成功”转变为真正理解浏览器如何布局页面。

介绍 Flexbox Inspector

Flexbox 是一种以灵活的方式组织和分配页面上元素的强大方法。

为了实现这一点，浏览器的布局引擎在幕后做了很多事情。当一切正常时，您无需担心这些。但是，当您的布局中出现问题时，您可能会感到沮丧，您可能真的需要理解元素为何以某种方式表现。

这正是 Flexbox Inspector 的重点。

突出显示容器、行和项目

首先，Flexbox Inspector 会突出显示组成 Flexbox 布局的元素：容器、行和项目。

能够看到这些元素的开始和结束位置，以及它们之间的距离，将极大地帮助您理解正在发生的事情。

启用后，高亮显示器将显示三个主要部分：

• 一个虚线轮廓，突出显示 Flex 容器本身
• 实线，显示 Flex 项目的位置
• 代表项目之间空闲空间的背景图案

一种启用 Flexbox 容器高亮显示器的方法是点击检查器中的“flex”徽章。这是一种在 DOM 中扫描元素时查找 Flex 容器的简便方法。此外，您还可以从 CSS 规则面板中的 Flex 图标以及布局侧边栏中新 Flexbox 部分的切换按钮启用高亮显示器。

了解 Flex 项目如何获得其大小

Flexbox 的优点在于您可以让浏览器为您做出正确的布局决策。元素应该伸展多少，还是应该换行？

但是，当您放弃控制时，您如何知道浏览器实际上在做什么呢？

Flexbox Inspector 带有显示浏览器如何分配给定项目大小的功能。

布局侧边栏现在包含一个 **Flex Container** 部分，其中列出了所有 Flex 项目，并提供有关容器本身的信息。

点击任何一个 Flex 项目将打开 **Flex Item** 部分，其中显示浏览器如何计算项目大小的详细信息。

Flexbox 部分顶部的图表快速概述了浏览器为项目指定大小所采取的步骤。

它显示了项目的基准大小（其最小内容大小或其 flex-basis 大小），从该大小添加的灵活空间（flex-grow）或移除的灵活空间（flex-shrink），以及限制项目变得更短或更长的任何最小或最大定义大小。

如果您在 Firefox 65 上阅读本文，则现在就可以试用它！

在该页面上打开 **检查器**，然后选择 div.masthead.row 元素。在侧边栏中查找 **Flex Container** 面板，然后点击这两个项目以查看浏览器如何计算它们的大小。

修复错误后，跟踪更改

假设您使用 Flexbox Inspector 修复了一个 Flexbox 错误。为此，您对各种 CSS 规则和元素进行了一些编辑。这时，您通常会遇到一个我们都遇到的问题：“我到底改变了什么才能让它起作用？”

在 Firefox 65 中，我们还引入了一个新的 Changes 面板 来实现这一点。

它会跟踪您在检查器中所做的所有 CSS 更改，因此您可以像往常一样继续工作。满意后，打开 **Changes** 选项卡，查看您所做的一切。

布局工具的未来发展方向

我们非常高兴您试用这两个新功能，并告诉我们 您的想法。但还有更多内容。

您一直在 告诉我们 您在 CSS 方面面临的最大挑战，我们一直在倾听。我们目前正在为调试不必要的滚动条、不起作用的 z-index 等问题制作布局工具，以及为 Flexbox Inspector 等其他类型的布局制作更多类似的工具。此外，我们将使您更容易从 Changes 面板中提取更改。

更智能的 JavaScript 检查和调试

在开发 JavaScript 时，控制台和调试器是您了解代码执行流程和状态更改的窗口。在过去的几个版本中，我们一直专注于使调试更好地适用于现代工具链。Firefox 65 延续了这一主题。

折叠框架堆栈跟踪

如果您使用框架和构建工具，那么您习惯在控制台中看到非常长的错误堆栈跟踪。新的智能堆栈跟踪会识别第三方代码（如框架），并默认将其折叠起来。这大大减少了在 **控制台** 中显示的信息，并让您专注于 *您的* 代码。

**折叠** 功能适用于控制台错误和日志的堆栈跟踪，以及调试器调用堆栈。

反向搜索控制台历史记录

如果您厌倦了猛烈敲击箭头键来查找一小时前在控制台中运行的令人惊叹的一行代码，那么这正是您需要的。反向搜索是众所周知的命令行功能，它可以让您快速浏览与输入字符串匹配的最近命令。

要在控制台中使用它，请在 Windows/Linux 上按 *F9*，或在 MacOS 上按 *Ctrl+R*，然后开始输入。然后，您可以使用 *Ctrl+R* 移动到上一个结果，或使用 *Ctrl+S* 移动到下一个结果。最后，按回车确认。

调用 getter 来检查返回值

JavaScript getter 非常适用于动态属性，并且在像 vue.js 这样的框架中被广泛用于计算属性。但是，当您将带有 getter 的对象记录到控制台时，记录的是该方法的引用，而不是其返回值。该方法不会自动调用，因为这可能会更改应用程序的状态。由于您通常实际上想要查看值，因此您现在可以手动调用记录到对象中的 getter。

无论在控制台还是调试器中，只要可以检查对象，您都会在 getter 旁边看到 >> 图标。点击这些图标将执行该方法并打印返回值。

在 XHR/Fetch 断点处暂停

控制台日志只是了解应用程序状态的一个方面。对于复杂的问题，您需要在恰当的时刻暂停状态。获取数据通常是这些时刻之一，现在它通过调试器中的新 XHR/Fetch 断点变得“可暂停”。

感谢 Firefox 开发者工具代码贡献者 Anshul Malik 为此有用功能提交了 “随意”的补丁，并感谢他一直以来的贡献。

JavaScript 调试的未来发展方向

您可能已经注意到，在最近的几个版本中，我们一直在努力使 JavaScript 调试体验更加稳固，包括断点、单步执行、源映射、性能等方面。提高质量标准，并继续改进和完善，仍然是整个团队的重点。

我们正在进行一些工作，包括针对 **列断点**、**日志点**、**事件** 和 **DOM 断点** 等功能的开发。我们正在控制台中构建创作体验，添加多行编辑模式（灵感来自 Firebug）以及更强大的自动完成功能。请关注 Firefox Developer Edition 的最新版本中这些功能的发布。

感谢

无数贡献者通过提交错误、编写补丁和验证补丁帮助开发者工具团队。特别感谢：

• Zameer Haque: 提高了 控制台中资源状态的 对比度。
• Heng Yeow: 添加了 Referrer-Policy 到 网络面板中的资源 Headers 列表（并 修复了 其他 错误）。
• Adam Holm: 更新了 网络面板中 编辑和重发 对话框的设计。
• Ariel Burone: 交换了 网络面板中的域名和文件列。

另外，感谢 Patrick Brosset、Nicolas Chevobbe 和整个 DevTools 团队及朋友们帮助撰写了这篇文章。

贡献

我们始终欢迎您对如何改进 DevTools 和浏览器的反馈。

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

下载 Firefox 开发者版 以获得即将发布的工具和平台的抢先体验。