DevTools 有什么新功能？

去年 9 月，我写了一些关于我们心爱的 DevTools 的最新更新，包括 Firefox、Chrome、Safari 和 Edge。 从那时起已经过去了四个月，开发 DevTools 的不同团队一直很忙！ 在这四个月里，他们建造了很多新东西供我们使用。 从强大的生产力改进到全新的面板，他们一直在不断缩小差距，并通过新的调试方法和改进我们的 Web 体验进行创新。

这意味着是时候进行另一个 DevTools 更新了，所以让我们开始吧！

• 铬合金
• 边缘
• 苹果浏览器
• 火狐

铬合金

Chrome 团队刚刚发布了一个新面板，可以非常简单地记录和回放用户流程：记录器面板。

记录、回放和衡量用户流

如果您曾经发现自己不得不在 Web 应用程序中一遍又一遍地重复相同的导航步骤以调查错误，那么这可能会改变您的生活！

但还有更多！ 记录步骤后，您可以在测量性能时重播它们。 这样，您可以优化代码，同时确保每次测试时始终运行相同的场景。

您可以在此处了解有关记录器的更多信息。 如果您对此工具有任何反馈，团队将很高兴听到您对这个铬问题的看法。

导航辅助功能树

将页面呈现到屏幕上并不是浏览器所做的唯一事情。 他们还使用在此过程中构建的 DOM 树来创建另一棵树：可访问性树。 可访问性树是当前页面的另一种表示形式，可由辅助技术（如屏幕阅读器）使用。

作为 Web 开发人员，访问此可访问性树非常有用。 它有助于了解您选择的标记如何影响屏幕阅读器解释页面的方式。

Chrome DevTools 在元素面板的侧边栏中有一个辅助功能面板已经有一段时间了，其中包含辅助功能树。 不过最近，该团队一直在尝试在同一个位置显示可访问性和 DOM 树，允许开发人员在两者之间来回切换。

要启用此实验，请转到辅助功能侧边栏面板，然后选中“启用整页辅助功能树”。 然后，您将在 DOM 树的右上角显示一个新按钮，可让您在 DOM 和可访问性树之间切换。

在此处了解更多信息，并让团队知道您的反馈。

CSS 概览现在默认开启

CSS 概览面板并不新鲜，但有这么多面板可供选择，您可能从未使用过它。 这是一个很长一段时间的实验，这意味着您需要进入 DevTools 设置以启用它，然后才能使用它。

这不再是必要的。 CSS 概览面板现在只是一个常规功能，您可以通过进入… > More tools > CSS Overview来打开它。

如果您从未使用过它，请尝试一下，因为它是一个非常有用的工具，可以识别潜在的 CSS 改进，例如对比度问题或未使用的 CSS 声明。

当您在“ More tools ”菜单中时，四处看看。 Chrome DevTools 有 30 多个独立的面板！ 这很多，但请记住，他们都在这里有一个特定的原因。 某些面板可能会帮助您处理您的 Web 应用程序的某些方面。 保持好奇，如果您不知道某件事是做什么的，请记住您可以阅读一些文档。

边缘

尽管微软的浏览器团队继续为 Chromium 项目做出积极贡献，但他们也将更多时间花在了只有 Edge 才有的新的和独特的功能上。 让我们在这里回顾一下其中的两个。

使用分离的元素面板调试 DOM 内存泄漏

Edge 刚刚推出了一个内存泄漏调查工具，即分离元素工具，它对于调查长时间运行的应用程序中的泄漏非常有用。

网页泄漏内存的多个原因之一是分离的 DOM 元素：在某些时候可能需要的元素，但从 DOM 中删除，并且从未重新附加。 当代码库变得复杂时，更容易出错而忘记清理那些分离的元素。

如果您发现您的应用程序在使用时不断需要越来越多的内存，请尝试使用 Detached Elements。 它可以很快为您指明正确的方向。

在公告博客文章和文档中了解更多信息。

具有焦点模式的 DevTools 全新用户界面

从早期的 Firebug 时代开始，我们的 DevTools 就一直看起来像他们那样。 当然，用户界面随着时间的推移发生了一些变化，添加了更多的工具，并且重新安排了一些东西，但在高层次上，它仍然基本相同。

Edge 团队进行的实验和用户研究表明，DevTools 可能非常强大（我是说 DevTools 已经有 30 多个面板了吗？）。 虽然新的 Web 开发人员并不清楚从哪里开始以及如何探索和使用这些工具，但更有经验的开发人员往往会发现自己只有一两个熟悉的工作流程。

基于此，Edge 团队发布了一项新的实验功能，让 DevTools 的学习和使用变得更加容易： Focus Mode 。

Focus Mode有一个新的活动栏、一种添加和删除工具的简单方法、一个快速查看抽屉和重新设计的菜单。

要尝试Focus Mode ，请先转到Settings > Experiments > Focus Mode来启用它。

您可以在此 Edge 解释器文档中了解有关Focus Mode的更多信息。

苹果浏览器

虽然 Safari 本身大约每年更新两次（秋季主要版本包含新功能，春季发布另一个主要版本），但可以通过使用 Safari 技术预览频道获得更频繁的更新和访问早期功能。 此版本的浏览器大约每 2 到 3 周更新一次。

您可能不想使用技术预览频道进行所有测试，因为您的客户可能只安装了常规的 Safari 版本，但它仍然是一个非常有趣的浏览器，可以不时使用。 通过这样做，您可以更早地访问新功能，并查看即将在 Safari 中出现的内容。

以下是技术预览频道中可用的 Safari Web Inspector 的一些最新更新，这些更新可以更好地使用 CSS。

样式面板中 CSS 的模糊自动完成

更改 CSS 是我们在 DevTools 中做的最多的事情之一，而 Safari 让我们所有人都快了很多。

现在，他们的 CSS 自动完成功能支持模糊匹配，这意味着您可以输入诸如“pat”之类的内容来匹配 padding-top，或者输入“bob”来匹配border-bottom。

如果您使用 VS Code 或其他支持模糊自动完成的文本编辑器，您会感到宾至如归。

在计算面板中按类型对 CSS 变量进行分组

多年来，所有主要浏览器都支持 CSS 变量（又名自定义属性），并且网站所有者、设计系统和库已经真正开始广泛使用它们。 有充分的理由，他们很棒！

但是随着使用量的增加，我们的 DevTools 的Styles和Computed窗格开始感觉有点拥挤。

Safari 发布了一项对此有所帮助的功能。 Computed窗格现在列出了整齐地隐藏在可折叠部分中的所有 CSS 变量，并且也按值类型分组。 例如，所有颜色变量都分组在一起。

直观地对齐和对齐 Flex 线和网格轨道

不久前，Chrome 和 Edge 在其Styles面板中为 flexbox 和网格布局提供了非常好的对齐编辑器。 它们使处理复杂的对齐属性（例如justify-content或align-items ）更加直观，因此更容易理解。

Safari 现在为align-content/items/self和justify-content/items/self CSS 属性提供了一个类似的可视化编辑器。 使用起来非常简单，只需单击样式面板中对齐值旁边的图标即可打开编辑器。 然后，您可以选择柔性线和网格轨道的对齐类型。

火狐

一段时间以来，Firefox DevTools 团队一直在重新构建 DevTools 代码库，虽然这导致在此期间交付的功能较少，但该项目现已完成。 这意味着团队带着很多非常酷的改进回来了。

选择您的执行上下文

有时您需要处理网站上的多个上下文，无论这些上下文来自多个 iframe 还是 Web Worker。 因为浏览器在多个不同的进程中运行这些东西，所以并不总是可以从 DevTools 轻松访问它们。

为了帮助解决这种情况，Firefox 刚刚在控制台中添加了一个上下文选择器，您可以使用它来选择您键入的代码的执行位置。 例如，如果您想知道 iframe 中某个全局变量的值，可以使用选择器切换到 iframe。

在 Inspector 中支持hwb()函数

hwb() CSS 颜色函数是 CSS 颜色模块 4 规范的一部分，是一种非常直观的指定颜色的方法。 HWB 颜色使用 3 个值：第一个是色调，它是颜色的起点。 第二个和第三个值是应混合以创建最终颜色的白色量和黑色量。

hwb功能目前在 Safari 和 Firefox 上得到支持，Firefox DevTools 团队刚刚在 Inspector 中发布了对它的支持。 现在hwb功能被正确识别，并且作为额外的奖励，使用键盘增加和减少W和B值会自动将它们保持在0%和100%之间。

选择不可选择的元素

有趣的是，从 DevTools 中选择元素取决于 pointer-events CSS 属性。 也就是说，如果一个元素被指定为不接收任何指针事件（使用pointer-events:none ），那么您将无法使用 DevTools 中的元素选择器选择它，因为它需要鼠标交互。

好吧，在 Chrome 和 Edge 中，有一个很少人知道的特殊技巧。 如果您在使用元素选择器时按住Shift键，则即使是pointer-events:none元素也可以选择。

好消息是 Firefox 也刚刚实现了相同的功能。 不同 DevTools 的功能相同对用户来说总是好消息，因为它使在多个浏览器上测试和调试网站变得更加容易。

当我们讨论平价的话题时，值得一提的是，Firefox 也刚刚提供了一种禁用单个事件侦听器的方法。

在 Inspector 面板中，您可以通过单击元素旁边的[env]标记列出附加到元素的事件侦听器。 现在，事件侦听器列表还包含用于切换侦听器的复选框。

忽略调试器中的单行代码

如果您花时间在使用框架和库的大型代码库上的 DevTools 中调试 JavaScript，您可能已经熟悉如何忽略源文件。 此功能允许您将整个文件标记为已忽略，以便调试器在其中暂停。

这意味着您可以将框架包文件标记为例如忽略，并愉快地调试您自己的代码，而不必担心进入框架代码。

虽然其他浏览器也支持此功能，但 Firefox 正在通过一个非常酷的演变进行创新：可以忽略文件中的行范围！ 想象一下，你在一个文件中有一个实用函数，它一直被调用。 仅将此函数标记为已忽略可能很有用，并且仍然能够正常调试该文件中的所有其他内容。 当使用将所有源代码和库分组在同一个文件中的捆绑器时，它也可能很有用。

在撰写本文时，此功能仍处于试验阶段。 您需要首先在about:config页面上将devtools.debugger.features.blackbox-lines布尔值设置为 true。

启用后，您可以右键单击源代码的任何行并选择Ignore line 。

现在就是这样！

我希望您喜欢这些更新，并且希望它们在进行 Web 开发时变得有用。 与往常一样，如果您有反馈、要报告的错误或 DevTools 的新功能想法，请让自己听到！ 令人印象深刻的是，Web 平台调试功能已经走了多远，我们都可以帮助它变得更好！