DevTools 的新功能：跨浏览器版本

浏览器开发工具不断发展，不断添加新的和改进的功能。 很难跟踪，尤其是在使用多个浏览器时。 有了这么多，我们感到不知所措并使用我们已经知道的功能而不是跟上新功能也就不足为奇了。

不过很遗憾，因为其中一些可以让我们更有效率。

因此，我撰写本文的目标是提高对 Chrome、Microsoft Edge、Firefox 和 Safari 中一些最新功能的认识。 希望它会让您想尝试一下，也许会在您下次需要调试特定于浏览器的问题时帮助您更舒服。

话虽如此，让我们直接进入。

Chrome 开发者工具

Chrome DevTools 团队一直在努力使他们（现已 13 岁）的代码库现代化。 他们一直在忙于改进构建系统，迁移到 TypeScript，引入新的 WebComponents，重新构建他们的主题基础设施等等。 因此，这些工具现在更易于扩展和更改。

但除了这些较少面向用户的工作之外，该团队还提供了许多功能。 让我在这里回顾一下其中的一些，与 CSS 调试有关。

滚动捕捉

CSS 滚动捕捉为 Web 开发人员提供了一种控制可滚动容器停止滚动的位置的方法。 这是一个有用的功能，例如，您希望浏览器自动为您将每张照片整齐地放置在其可滚动容器中的长照片列表。

如果您想了解有关滚动捕捉的更多信息，可以阅读此 MDN 文档，并在此处查看 Adam Argyle 的演示。

滚动捕捉的关键属性是：

• scroll-snap-type ，它告诉浏览器捕捉发生的方向，以及它是如何发生的；
• scroll-snap-align ，它告诉浏览器在哪里捕捉。

Chrome DevTools 引入了有助于调试这些关键属性的新功能：

• 如果一个元素使用scroll-snap-type定义了滚动捕捉，则元素面板会在它旁边显示一个徽章。

• 您可以单击滚动捕捉徽章以启用新的覆盖。 当您这样做时，页面上会突出显示几件事：
  • 滚动容器，
  • 在容器内滚动的项目，
  • 项目对齐的位置（用蓝点标记）。

此叠加层使您可以轻松了解滚动后是否以及如何卡入到位。 例如，当您的项目没有背景并且它们之间的边界很难看到时，这可能非常有用。

虽然滚动捕捉不是新的 CSS 功能，但采用率相当低（根据 chromestatus.com，不到 4%），而且由于规范发生了变化，并不是每个浏览器都以相同的方式支持它。

我希望这个 DevTools 功能能让人们想要更多地使用它，并最终在他们的网站上采用它。

容器查询

如果您近年来从事过任何类型的 Web 开发，您可能听说过容器查询。 长期以来，它一直是最受欢迎的 CSS 功能之一，也是浏览器制造商和规范编写者需要解决的一个非常复杂的问题。

如果您不知道什么是容器查询，我建议您先阅读 Stephanie Eckles 的 CSS 容器查询入门文章。

简而言之，它们是开发人员根据容器大小定义元素布局和样式的一种方式。 在创建可重用组件时，这种能力是一个巨大的优势，因为我们可以让它们适应它们使用的地方（而不是只适应媒体查询适合的视口大小）。

幸运的是，这个领域的事情正在发生变化，Chromium 现在支持容器查询，Chrome DevTools 团队已经开始添加工具，使其更容易开始使用它们。

Chromium 中默认情况下尚未启用容器查询（要启用它们，请转到 chrome://flags 并搜索“容器查询”），它们可能还需要一段时间才能启用。 此外，调试它们的 DevTools 工作仍处于早期阶段。 但是一些早期的功能已经落地。

• 当在 DevTools 中选择具有来自@container规则的样式的元素时，该规则将出现在元素面板的样式侧边栏中。 这类似于媒体查询样式在 DevTools 中的呈现方式，并且可以直接了解特定样式的来源。

如上面的屏幕截图所示，样式侧边栏显示了适用于当前元素的 2 条规则。 底部始终适用于.media元素并提供其默认样式。 而最上面的嵌套在一个@container (max-width:300px)容器查询中，只有当容器小于300px 时才会生效。

• 最重要的是，就在@container at-rule 上方，Styles 窗格显示一个指向该规则解析的元素的链接，将鼠标悬停在它上面会显示有关其大小的额外信息。 这样您就可以确切地知道容器查询匹配的原因。

Chrome DevTools 团队正在积极开发此功能，您可以期待更多的未来。

铬合作

在介绍其他浏览器具有的功能之前，让我们先谈谈 Chromium。 Chromium 是 Chrome、Edge、Brave 和其他浏览器构建的开源项目。 这意味着所有这些浏览器都可以访问 Chromium 的功能。

该项目最活跃的两个贡献者是 Google 和 Microsoft，当谈到 DevTools 时，他们合作开发了一些有趣的功能，我现在想介绍一下。

CSS 布局调试工具

几年前，Firefox 在这个领域进行了创新，推出了第一个网格和 flexbox 检查器。 基于 Chromium 的浏览器现在也使 Web 开发人员可以轻松地调试网格和 flexbox。

这个协作项目涉及来自微软和谷歌的工程师、产品经理和设计师，他们朝着一个共同的目标努力（在我的 BlinkOn 演讲中了解有关项目本身的更多信息）。

除其他外，DevTools 现在具有以下布局调试功能：

• 突出显示页面上的多个网格和弹性布局，并自定义是否要查看网格线名称或编号、网格区域等。

• Flex 和网格编辑器可以直观地使用各种属性。

• CSS 自动完成中的对齐图标使选择属性和值更容易。

• 突出显示属性悬停以了解属性适用于页面的哪些部分。

您可以在 Microsoft 和 Google 的文档站点上阅读有关此内容的更多信息。

本土化

这是另一个涉及 Microsoft 和 Google 的合作项目，现在，所有基于 Chromium 的 DevTools 都可以翻译成英语以外的其他语言。

最初，从未有过本地化 DevTools 的计划，这意味着这是一项巨大的努力。 它涉及遍历整个代码库并使 UI 字符串可本地化。

结果还是值得的。 如果英语不是您的第一语言，并且您更愿意在其他语言中使用 DevTools，请转到设置 ( F1 ) 并找到语言下拉菜单。

下面是它在 Chrome DevTools 中的截图：

这是Edge在日语中的外观：

边缘开发工具

微软在两年多前转向 Chromium 开发 Edge。 虽然当时它在网络社区引起了很多讨论，但从那时起就没有太多关于它的文章或言论。 不过，在 Edge（包括其 DevTools）上工作的人一直很忙，现在浏览器有很多独特的功能。

基于 Chromium 开源项目确实意味着 Edge 受益于其所有功能和错误修复。 实际上，Edge 团队将 Chromium 存储库中所做的更改提取到他们自己的存储库中。

但在过去一年左右的时间里，团队开始根据 Edge 用户的需求和反馈创建 Edge 特定的功能。 Edge DevTools 现在有一系列我将介绍的独特功能。

打开、关闭和移动工具

DevTools 拥有近 30 个不同的面板，在任何浏览器中都是一款非常复杂的软件。 但是，您永远不需要同时访问所有工具。 事实上，第一次启动 DevTools 时，只有几个面板可见，以后可以添加更多。

但另一方面，很难发现默认情况下不显示的面板，即使它们对您非常有用。

Edge 添加了 3 个小而强大的功能来解决这个问题：

• 选项卡上的关闭按钮可关闭您不再需要的工具，
• 标签栏末尾的+ （加号）按钮可打开任何工具，
• 用于移动工具的上下文菜单选项。

下面的 GIF 显示了如何在 Edge 中完成主区域和抽屉区域中的关闭和打开工具。

您还可以在主区域和抽屉区域之间移动工具：

• 右键单击顶部的选项卡会显示“移至底部”项目，并且
• 右键单击抽屉中的选项卡会显示“移至顶部”项目。

使用 DevTools 工具提示获取上下文帮助

初学者和经验丰富的开发人员都很难完全了解 DevTools。 正如我之前提到的，有这么多的面板，你不太可能知道它们。

为了解决这个问题，Edge 添加了一种直接从工具转到 Microsoft 网站上的文档的方法。

这个新的工具提示功能用作覆盖工具的可切换叠加层。 启用后，面板会突出显示，并为每个面板提供上下文帮助，并提供文档链接。

您可以通过 3 种不同的方式启动工具提示：

• 在 Windows/Linux 上使用Ctrl + Shift + H键盘快捷键（在 Mac 上使用Cmd + Shift + H ）；
• 进入主 ( ... ) 菜单，然后进入帮助，并选择“切换 DevTools 工具提示”；
• 通过使用命令菜单并键入“工具提示”。

自定义颜色

在代码编辑环境中，开发人员喜欢自定义他们的颜色主题，以使代码更易于阅读和观看。 因为 Web 开发人员也在 DevTools 上花费了大量时间，所以它也有可定制的颜色是有意义的。

Edge 刚刚在已经可用的深色和浅色主题之上向 DevTools 添加了许多新主题。 一共增加了9个新主题。 这些来自 VS Code，因此使用此编辑器的人会很熟悉。

您可以通过进入设置（使用F1或右上角的齿轮图标）或使用命令菜单并键入theme来选择要使用的主题。

Firefox 开发工具

与 Chrome DevTools 团队类似，Firefox DevTools 的开发人员一直在忙于大规模的架构更新，旨在现代化他们的代码库。 此外，由于 Mozilla 最近不得不重新关注，他们的团队现在变得相当小了。 但是，即使这意味着他们有更少的时间来添加新功能，他们仍然设法发布了一些非常有趣的功能，我现在将介绍这些功能。

调试不需要的滚动条

你有没有问过自己：“这个滚动条是从哪里来的？” 我知道我有，现在 Firefox 有一个工具来调试这个问题。

在 Inspector 面板中，所有滚动的元素旁边都有一个scroll标记，这在处理深度嵌套的 DOM 树时已经很有用了。 最重要的是，您可以单击此标记以显示导致滚动条出现的元素（或多个元素）。

您可以在此处找到有关它的更多文档。

可视化跳位顺序

使用键盘浏览网页需要使用tab键逐个移动可聚焦元素。 使用tab时可聚焦元素的聚焦顺序是网站可访问性的一个重要方面，不正确的顺序可能会使用户感到困惑。 注意这一点尤其重要，因为现代布局 CSS 技术允许 Web 开发人员非常轻松地重新排列页面上的元素。

Firefox 有一个有用的 Accessibility Inspector 面板，它提供有关可访问性树的信息，自动发现和报告各种可访问性问题，并让您模拟不同的色觉缺陷。

在这些功能之上，面板现在提供了一个新的页面覆盖，显示可聚焦元素的跳格顺序。

要启用它，请使用工具栏中的“显示跳位顺序”复选框。

您可以在此处找到有关它的更多文档。

全新的性能工具

没有多少 Web 开发领域像性能优化那样依赖工具。 在这个领域，Chrome DevTools 的性能面板是同类中最好的。

在过去的几年里，Firefox 工程师一直专注于提高浏览器本身的性能，为了帮助他们做到这一点，他们构建了一个性能分析器工具。 该工具最初是为优化引擎原生代码而构建的，但也支持从一开始就分析 JavaScript 性能。

今天，这个新的性能工具在预发布版本（Nightly 和 Developer Edition）中取代了旧的 Firefox DevTools 性能面板。 当你有机会时，不妨试一试。

除此之外，新的 Firefox 分析器支持与他人共享配置文件，因此他们可以帮助您提高记录的用例的性能。

您可以在此处阅读有关它的文档，并在他们的 GitHub 存储库中了解有关该项目的更多信息。

Safari 网络检查器

最后但同样重要的是，让我们回顾一下最近的一些 Safari 功能。

Apple 的小团队一直忙于围绕工具进行广泛的改进和修复。 了解有关 Safari Web Inspector 的更多信息可以帮助您在 iOS 或 tvOS 设备上调试网站时提高工作效率。 此外，它还有很多其他 DevTools 没有的功能，而且很多人都不知道。

CSS 网格调试

由于 Firefox、Chrome 和 Edge（以及所有基于 Chromium 的浏览器）拥有用于可视化和调试 CSS 网格的专用工具，Safari 是最后一个没有此功能的主流浏览器。 好吧，现在可以了！

从根本上说，Safari 现在在这方面与其他浏览器的 DevTools 具有相同的功能。 这很棒，因为这意味着从一个浏览器切换到另一个浏览器很容易，并且仍然保持高效。

• 网格标记显示在元素面板中以快速查找网格。
• 单击徽章可切换页面上的可视化覆盖。
• 一个新的布局面板现在显示在侧边栏中。 它允许您配置网格覆盖，查看页面上所有网格的列表并为它们切换覆盖。

Safari 实现的有趣之处在于，他们确实掌握了该工具的性能方面。 您可以一次启用许多不同的覆盖，并在页面上滚动而不会导致任何性能问题。

另一个有趣的事情是 Safari 引入了一个 3 窗格元素面板，就像 Firefox 一样，它允许您同时查看 DOM、所选元素的 CSS 规则和布局面板。

在此 WebKit 博客文章中了解有关 CSS Grid Inspector 的更多信息。

一系列调试器改进

Safari 曾经有一个单独的资源和调试器面板。 他们将它们合并到一个单独的 Sources 面板中，这样在调试代码时可以更轻松地找到所需的一切。 此外，这使得该工具与很多人习惯的 Chromium 更加一致。

在跨浏览器的世界中，常见任务的一致性很重要。 Web 开发人员已经需要跨多个浏览器进行测试，因此如果他们在使用其他浏览器的 DevTools 时需要学习一个全新的范例，这会使事情变得比他们需要的更困难。

但 Safari 最近还专注于为其调试器添加其他 DevTools 所没有的创新功能。

引导脚本：
Safari 允许您编写保证在页面上的任何脚本之前首先运行的 JavaScript 代码。 例如，这对于检测用于添加debugger语句或日志记录的内置函数非常有用。

新断点配置：
所有浏览器都支持多种类型的断点，例如条件断点、DOM 断点、事件断点等。

Safari 最近改进了他们的整个断点类型套件，为它们提供了一种广泛配置它们的方法。 使用这个新的断点功能，您可以决定：

• 如果您希望仅在某个条件为真时才触发断点，
• 如果您希望断点完全暂停执行，或者只是执行一些代码，
• 甚至播放音频哔声，以便您知道某行代码已执行。

queryInstances和queryHolders控制台函数：
当您的站点开始使用大量 JavaScript 对象时，这两个函数非常有用。 在某些情况下，可能很难跟踪这些对象之间的依赖关系，并且内存泄漏也可能开始出现。

Safari 确实有一个内存工具，可以通过让您探索内存堆快照来帮助解决这些问题。 但是有时您已经知道是哪个类或对象导致了问题，并且您想查找存在哪些实例或引用它的对象。

如果Animal是应用程序中的 JavaScript 类，则queryInstances(Animal)将返回其所有实例的数组。

如果foo是应用程序中的一个对象，那么queryHolders(foo)将返回一个包含对foo的引用的所有其他对象的数组。

结束的想法

我希望这些功能对您有用。 我只能推荐使用多个浏览器并熟悉他们的 DevTools。 当您必须在您不经常使用的浏览器中调试问题时，更熟悉其他 DevTools 会很有用。

要知道，制造浏览器的公司都有团队积极致力于 DevTools。 他们致力于使它们变得更好、更少故障和更强大。 这些团队依靠您的反馈来构建正确的东西。 如果不了解您面临的问题或缺少哪些功能，他们就很难就构建什么做出正确的决定。

向 DevTools 团队报告错误不仅会在修复出现时帮助您，还可能会帮助许多面临相同问题的其他人。

值得知道的是，Microsoft、Mozilla、Apple 和 Google 的 DevTools 团队通常规模很小，并且会收到很多反馈，因此报告问题并不意味着它会很快得到解决，但它确实有帮助，而且这些团队正在倾听。

您可以通过以下几种方式报告错误、提出问题或请求功能：

• Firefox 开发工具
  • Firefox 使用 Bugzilla 作为他们的公共错误跟踪器，欢迎任何人通过在此处创建新条目来报告错误或请求新功能。 您只需要一个 GitHub 帐户即可登录。
  • 可以使用@FirefoxDevTools 帐户在 Twitter 上与团队取得联系，也可以登录 Mozilla 聊天（在此处查找有关聊天的文档）。
• Safari 网络检查器
  • Safari 还为他们的 WebKit 错误使用公共错误跟踪。 这是有关如何搜索错误和报告新错误的文档。
  • 您还可以使用 @webkit 在 Twitter 上与团队联系。
  • 最后，您还可以使用反馈助手报告有关 Safari 和 Safari Web Inspector 的错误。
• 边缘开发工具
  • 报告问题或请求功能的最简单方法是使用 DevTools 中的反馈按钮（工具右上角的小棒图）。
  • 通过提及@EdgeDevTools 帐户，通过 Twitter 向团队提问最有效。
• Chrome 开发者工具
  • 该团队在 devtools-dev 邮件列表以及 Twitter 上的 @ChromeDevTools 上听取反馈。
• 铬
  • 由于 Chromium 是支持 Google Chrome 和 Microsoft Edge（以及其他）的开源项目，您还可以在 Chromium 的错误跟踪器上报告问题。

至此，感谢您的阅读！