2020 年 Chrome DevTools 新功能一览

我很高兴与大家分享 Chrome DevTools 中的一些新功能。 下面是一个简短的介绍，然后我们将介绍许多新的 DevTools 功能。 我们还将了解其他一些浏览器中发生的情况。 我会持续关注这些内容，因为我创建了 Dev Tips，这是您在网上能找到的最大的 DevTools 提示集合！

了解 DevTools 中的变化是一个好主意，因为它在不断发展，新功能专门设计用于帮助和改进我们的开发和调试体验。

让我们进入最新和最棒的功能。 虽然 Chrome 的公开稳定版本确实拥有大多数这些功能，但我正在使用 Chrome Canary，因为我喜欢走在技术前沿。

Lighthouse

Lighthouse 是一款用于审核网页的 开源 工具，通常围绕性能、SEO、可访问性等方面进行。 一段时间以来，Lighthouse 作为 DevTools 的一部分捆绑在一起，这意味着您可以在一个名为... Lighthouse 的面板中找到它！

我真的很喜欢 Lighthouse，因为它是最易于使用的 DevTools 部分之一。 点击“生成报告”，您会立即获得网页的人类可读注释，例如

文档使用易读的字体大小 100% 易读文本

或者

避免过大的 DOM 大小（1,189 个元素）

几乎每个审核都链接到开发者文档，解释了审核如何可能失败以及您可以做些什么来改进它。

开始使用 Lighthouse 的最佳方法是在您自己的网站上运行审核

1. 打开 DevTools 并导航到您网站上的 **Lighthouse 面板**
2. 选择您要审核的项目（**最佳实践** 是一个良好的起点）
3. 点击 **生成报告**
4. 点击任何已通过/未通过的审核以调查结果

尽管 Lighthouse 已经成为 DevTools 的一部分有一段时间了（自 2017 年！），但它仍然值得重点提及，因为它继续发布面向用户的特性，例如

• 一项检查锚元素是否解析到其 URL 的审核（有趣的事实：我 参与了这项工作！）
• 一项 审核，检查最大内容绘制指标是否足够快
• 一项 审核，警告您未使用 JavaScript

更好的“检查元素”

这是一个微妙的，从某些方面来说非常小的功能，但它可能对我们如何处理 Web 可访问性产生深远的影响。

它的工作原理如下。 当您使用“检查元素”（这可以说是 DevTools 最常见的用途）时，您现在会获得一个包含有关可访问性的其他信息的工具提示。

我说这可能产生深远影响的原因是，DevTools 已经拥有可访问性功能相当一段时间了，但我们中有多少人真正使用过它们？ 在像“检查元素”这样的常用功能上包含此信息将使其获得更多关注，并使其更容易访问。

工具提示包括

• 文本的对比度（前景文本与背景颜色的对比度如何，或有多差）
• 文本表示
• ARIA 角色
• 被检查的元素是否可通过键盘聚焦

要尝试此功能，请右键单击（或Cmd + Shift + C）某个元素，然后选择**检查**以在 DevTools 中查看它。

我制作了一个关于 使用 Chrome DevTools 进行可访问性调试 的 14 分钟视频，其中更详细地介绍了其中的一些内容。

模拟视力缺陷

正如其名，您可以使用 Chrome DevTools 模拟视力障碍。 例如，我们可以通过模糊视觉的视角查看站点。

如何在 DevTools 中执行此操作？ 如下所示

1. 打开 DevTools（右键单击并选择“检查”或Cmd + Shift + C）。
2. 打开 **DevTools 命令菜单**（在 Mac 上按Cmd + Shift + P，在 Windows 上按Ctrl + Shift + P）。
3. 在命令菜单中选择**显示渲染**。
4. 在 **渲染窗格**中选择一个缺陷。

我们以模糊视觉为例，但 DevTools 还有其他选项，包括：全色盲、第二色盲、第三色盲和全色视觉障碍。

与任何此类工具一样，它旨在补充我们（希望是）现有的可访问性技能。 换句话说，它不是教学性的，而是对我们创建的设计和用户体验有影响。

以下是一些关于低视力可访问性和模拟的额外资源

• 视力障碍人士的可访问性要求（W3C）
• 通过模拟视力缺陷来提高页面可访问性

获取性能计时

DevTools 中的性能面板有时看起来像是形状和颜色的混乱混合。

此更新非常棒，因为它在显示有意义的性能指标方面做得更好。

我们要关注的是“性能面板”记录中“计时”中显示的那些额外的计时矩形。 这突出显示了

• **DOMContentLoaded：**初始 HTML 加载时触发的事件
• **首次绘制：**浏览器首次将像素绘制到屏幕上
• **首次内容绘制：**浏览器绘制来自 DOM 的内容的点，这向用户表明内容正在加载
• **Onload：**页面及其所有资源都已完成加载
• **最大内容绘制：**在视口中呈现的最大图像或文本元素

作为奖励，如果您在性能面板记录中找到最大内容绘制事件，您可以点击它以获取其他信息。

虽然这里有很多有价值的信息，但“相关节点”可能是最有用的项目，因为它指定了哪个元素导致了 LCP 事件。

要尝试此功能

1. 打开 DevTools 并导航到 **性能面板**
2. 点击 **“开始分析并重新加载页面”**
3. 观察记录的 **计时部分** 中的计时指标
4. 点击各个指标以查看您获得的其他信息

监控性能

如果您想快速开始使用 DevTools 分析性能，并且已经尝试过 Lighthouse，那么我推荐使用性能监视器功能。 这就像将 WebPageTest.org 放在您的指尖，并提供诸如 CPU 使用率等功能。

以下是访问它的方法

1. 打开 DevTools
2. 打开 **命令菜单**（在 Mac 上按Cmd + Shift + P，在 Windows 上按Ctrl + Shift + P）
3. 从命令菜单中选择 **“显示性能监视器”**
4. 与网站互动并浏览
5. 观察结果

性能监视器可以为您提供有趣的指标，但是，与 Lighthouse 不同，它需要您自己弄清楚如何解释它们并采取行动。 它不提供任何建议。 您需要自己研究 CPU 使用率图表，并询问 90% 这样的水平对于您的网站是否可以接受（可能不行）。

性能监视器有一个交互式图例，您可以在其中打开和关闭指标，例如

• CPU 使用率
• JS 堆大小
• DOM 节点
• JS 事件侦听器
• 文档
• 文档框架
• 布局/秒
• 样式重新计算/秒

CSS 概述及本地覆盖

CSS-Tricks 已经涵盖了这些功能，所以去看看吧！

• CSS 概述: 一个方便的 DevTools 面板，提供了有关页面使用的 CSS 的大量有趣统计信息
• 本地覆盖: 一个强大的功能，允许你用本地资源覆盖生产网站，以便轻松预览更改

那么，其他浏览器中的 DevTool 呢？

我相信你已经注意到，我在整篇文章中一直在使用 Chrome。这是我个人使用的浏览器。也就是说，值得考虑的是

• Firefox DevTools 现在看起来非常棒
• 随着 Microsoft Edge 从 Chromium 扩展而来，它也将受益于这些 DevTools 功能
• 正如 Safari 技术预览版发行说明（在该页面上搜索 Web Inspector）所示，Safari DevTools 已经取得了长足的进步

换句话说，请密切关注，因为这是一个快速发展的领域！

结论

我们在很短的时间内涵盖了很多内容！

• Lighthouse: 一个提供性能、可访问性、SEO 和最佳实践提示和建议的面板。
• 检查元素: 对检查元素功能的增强，为检查元素工具提示提供可访问性信息
• 模拟视力缺陷: 渲染面板中的一项功能，用于通过低视力镜头的视角查看页面。
• 性能面板计时: 性能面板记录中的其他指标，显示面向用户的统计信息，例如最大内容绘制
• 性能监视器 – 当前网站性能指标的实时可视化，例如 CPU 使用率和 DOM 大小

如果你想了解最新更新并获得超过 200 个 Web 开发技巧，请查看我的邮件列表 Dev Tips！我还在 ModernDevTools.com 上开设了一门高级视频课程。此外，我倾向于在 Twitter 上发布大量额外的 Web 开发资源。