DevTools 的新功能：跨浏览器版

快速总结 ↬ 了解 Firefox、Edge、Chrome 和 Safari 中开发人员工具的新功能。发现新的强大功能，这些功能将帮助您在跨浏览器进行测试和调试时更加方便和高效。

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

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

因此，我撰写本文的目的是提高人们对 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 的Primer On CSS Container Queries 文章。

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

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

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

在 DevTools 中选择具有来自@containerat-rule 的样式的元素时，此规则会出现在 Elements 面板的 Styles 侧栏中。这类似于 DevTools 中媒体查询样式的呈现方式，并且可以直接了解特定样式的来源。

在样式窗格中匹配容器查询时，可以轻松查看何时应用 CSS 规则。（大图预览）

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

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

将鼠标悬停在容器查询上以了解其匹配的原因和位置。

Chrome DevTools 团队正在积极致力于此功能，您可以期待未来更多。

Chromium 联合#

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

这个项目的两个最活跃的贡献者是谷歌和微软，就 DevTools 而言，他们合作开发了一些我现在想介绍的有趣功能。

CSS 布局调试工具 #

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

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

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

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

突出显示网格线和弹性项目。（大图预览）

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

直观地使用各种 flex 对齐属性。（大图预览）

CSS 自动完成中的对齐图标可以更轻松地选择属性和值。

使用新图标轻松查看给定的 CSS 属性值将如何影响布局。（大图预览）

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

独立突出显示各种 CSS 属性以了解它们如何影响布局。（大图预览）

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

本地化 #

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

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

如果英语不是您的第一语言，并且您觉得在不同的语言中使用 DevTools 会更舒服，请转到设置 ( F1) 并找到语言下拉菜单。

这是它在 Chrome DevTools 中的样子的屏幕截图：

在 Chrome DevTools 的设置面板中更改语言。（大图预览）

这是 Edge 在日语中的外观：

DevTools UI 在日语本地化时的样子。（大图预览）

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 种不同的方式启动工具提示：

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

显示有关工具的上下文帮助。（大图预览）

自定义颜色 #

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

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

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

使用 9 个 VS Code 主题之一自定义 DevTools。（大图预览）

火狐开发者工具

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

调试不需要的滚动条 #

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

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

通过单击滚动标记查找导致不需要的溢出的元素。（大图预览）

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

可视化 TAB 键顺序 #

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

Firefox 有一个有用的 Accessibility Inspector 面板，它提供有关辅助功能树的信息，自动查找和报告各种辅助功能问题，并让您模拟不同的色觉缺陷。

除了这些功能之外，该面板现在提供了一个新的页面覆盖，显示可聚焦元素的 Tab 键顺序。

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

突出显示所有可聚焦元素并查看它们将被聚焦的顺序。（大图预览）

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

全新的性能工具 #

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

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

今天，这个新的性能工具取代了预发布版本（Nightly 和开发者版）中旧的 Firefox DevTools 性能面板。一有机会就试一试。

新的 Firefox Profiler 可让您深入挖掘以发现性能问题的来源。（大图预览）

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

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

Safari 网页检查器 #

最后但并非最不重要的一点是，让我们回顾一些最近的 Safari 功能。

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

CSS 网格调试 #

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

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

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

在新的 Safari 网格检查器中突出显示网格线、网格间隙、网格区域、显示行号、行名称和轨道大小。（大图预览）

Safari 实现的有趣之处在于，它们确实抓住了该工具的性能方面。您可以一次启用许多不同的叠加层，并在页面上滚动而不会造成任何性能问题。

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

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

大量调试器改进#

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

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

新的统一来源面板。（大图预览）

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

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

Safari 的引导脚本允许在页面加载之前运行代码以覆盖内置对象和 API。（大图预览）

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

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

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

完全按照您想要的方式配置断点。（大图预览）

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

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

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

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

结束思考 #

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

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

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

值得一提的是，Microsoft、Mozilla、Apple 和 Google 的 DevTools 团队通常相当小，并且会收到很多反馈，因此报告问题并不意味着它会很快得到修复，但它确实有帮助，而且这些团队倾听用户的心声。

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

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