看看2020年Chrome Devtools中的新内容

Chrome DevTools 2020 年的新功能一览

本文将带您快速了解 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 检查器）所证明的那样，Safari DevTools 已经取得了长足的进步

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

结论

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

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

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

以上是看看2020年Chrome Devtools中的新内容的详细内容。更多信息请关注PHP中文网其他相关文章！