开发者工具的新变化 (Chrome 62)

Kayce Basques

Chrome 62 中的 DevTools 将推出以下新功能和变更：

控制台中的顶级 await 运算符

控制台现在支持顶级 await 运算符。

在控制台中使用顶级 await 运算符

图 1. 在 Console 中使用顶级 await 运算符

新的屏幕截图工作流

现在，您可以截取视口的一部分或特定 HTML 节点的屏幕截图。

视口的一部分的屏幕截图

如需截取视口的一部分屏幕截图，请执行以下操作：

  1. 点击检查图标 检查，或按 Command+Shift+C (Mac) 或 Control+Shift+C (Windows、Linux) 进入“检查元素”模式。
  2. 按住 Command（Mac）或 Control（Windows、Linux），然后选择要截取屏幕截图的视口区域。
  3. 松开鼠标。开发者工具会下载您选择的部分的屏幕截图。

截取视口的一部分的屏幕截图

图 2. 截取视口的一部分的屏幕截图

特定 HTML 节点的屏幕截图

如需截取特定 HTML 节点的屏幕截图，请执行以下操作：

  1. 在元素面板中选择一个元素。

    节点示例

    图 3. 在此示例中，目标是截取包含文本 Tools 的蓝色标题的屏幕截图。请注意，此节点已在 Elements 面板的 DOM 树中选中

  2. 打开命令菜单。

  3. 开始输入 node 并选择 Capture node screenshot。DevTools 会下载所选节点的屏幕截图。

    “截取节点屏幕截图”命令的结果

    图 4. Capture node screenshot 命令的结果

CSS 网格突出显示

如需查看影响元素的 CSS 网格，请将鼠标悬停在 Elements 面板的 DOM 树中某个元素上。每个网格项周围都会显示虚线边框。只有在所选项或所选项的父项应用了 display:grid 时，此操作才有效。

突出显示 CSS 网格

图 5. 突出显示 CSS 网格

观看下面的视频，在不到 2 分钟的时间内了解 CSS 网格的基础知识。

用于查询堆对象的新 API

从控制台调用 queryObjects(Constructor) 可返回使用指定构造函数创建的对象数组。例如：

  • queryObjects(Promise)。返回所有 Promise。
  • queryObjects(HTMLElement)。返回所有 HTML 元素。
  • queryObjects(foo)，其中 foo 是函数名称。返回通过 new foo() 实例化的所有对象。

queryObjects() 的范围是 Console 中当前所选的执行上下文。请参阅选择执行环境。

新的 Play 管理中心过滤条件

控制台现在支持排除对象过滤条件和网址过滤条件。

负片滤镜

在过滤条件框中输入 -<text>，即可滤除包含 <text> 的所有 Console 消息。

3 条将被滤除的消息示例

图 6. 第一个语句会将 one、two、three 和 four 记录到控制台。two 被隐藏，因为在过滤条件框中输入了 -two

如果发现 <text>，DevTools 会滤除消息：

  • 在消息文本中。
  • 在发送消息时使用的文件名中。
  • 在堆栈轨迹文本中。

排除性过滤条件也适用于正则表达式，例如 -/[4-5]*ms/。

网址过滤条件

在过滤框中输入 url:<text>，以仅显示来自网址包含 <text> 的脚本的消息。

过滤器使用模糊匹配。如果 <text> 出现在网址中的任何位置，则开发者工具会显示该消息。

网址过滤示例

图 7. 使用网址过滤功能，仅显示来自网址包含 hymn 的脚本的消息。将鼠标悬停在脚本名称上，您会看到主机名包含此文本

“网络”面板中的 HAR 导入

将 HAR 文件拖放到网络面板中以进行导入。

导入 HAR 文件

图 8. 导入 HAR 文件

“应用”面板中可预览的缓存资源

点击缓存存储空间表格中的某一行，即可在表格下方查看该资源的预览。

预览缓存资源

图 9. 预览缓存资源

缓存调试响应更快

在 Chrome 61 及更低版本中，使用 Cache API 创建的缓存的调试体验很差。例如，当某个网页创建新缓存时，您必须手动刷新网页或 DevTools，才能看到新缓存。

在 Chrome 62 中，每当您创建、更新或删除缓存或资源时，缓存存储标签页都会实时更新。请观看下面的视频，了解相关示例。

请参阅缓存存储演示，亲自试用。

代码块级代码覆盖率

在 Chrome 61 及更低版本中，只要函数被调用，覆盖率标签页就会将函数中的所有代码标记为已使用。

Chrome 61 中的“Coverage”（覆盖率）标签页示例

图 10. Chrome 61 中的 Coverage（覆盖率）标签页示例。第 4 行被标记为已使用，即使它从未执行

从 Chrome 62 开始，覆盖率标签页现在会告知您调用了函数中的哪些代码。

Chrome 62 中的“Coverage”（覆盖率）标签页示例

图 11. Chrome 62 中的 Coverage（覆盖率）标签页示例。第 4 行被标记为未使用

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。