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

Google 用户调研。

Chrome 62 中即将推出的开发者工具新功能和变化：

• 支持控制台中的顶级 await 运算符。
• 视口一部分的屏幕截图，以及特定 HTML 节点的屏幕截图。
• CSS 网格突出显示。
• 用于查询对象的新 Console API。
• 控制台中的排除过滤条件和网址过滤条件。
• “网络”面板中的 HAR 导入。
• 可预览的缓存资源。
• 更可预测的缓存调试。
• 块级代码覆盖率。

控制台中的顶级 await 运算符

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

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

新的屏幕截图工作流

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

视口的部分屏幕截图

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

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

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

特定 HTML 节点的屏幕截图

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

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

   

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

2. 打开命令菜单。

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

   

   图 4. Capture node screenshot 命令的结果

CSS 网格突出显示

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

图 5. 突出显示 CSS 网格

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

用于查询堆对象的新 API

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

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

queryObjects() 的范围是控制台中当前所选的执行上下文。请参阅选择执行上下文。

新版控制台过滤条件

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

负面过滤条件

在过滤条件框中输入 -<text>，以过滤掉包含 <text> 的所有控制台消息。

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

如果找到 <text>，开发者工具会过滤掉相应消息：

• 在消息正文中。
• 在消息来源的文件名中。
• 在堆栈轨迹文本中。

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

网址过滤条件

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

过滤条件使用模糊匹配。如果网址中任何位置出现 <text>，开发者工具就会显示相应消息。

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

“网络”面板中的 HAR 导入

将 HAR 文件拖放到 Network 面板中即可导入该文件。

图 8. 导入 HAR 文件

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

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

图 9. 预览缓存资源

更快速的缓存调试

在 Chrome 61 及更早版本中，调试使用 Cache API 创建的缓存非常困难。例如，当网页创建新缓存时，您必须手动刷新网页或开发者工具才能看到新缓存。

在 Chrome 62 中，每当您创建、更新或删除缓存或资源时，缓存存储标签页现在都会实时更新。观看下方视频，查看示例。

请参阅 Cache Storage 演示，亲自试用。

块级代码覆盖率

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

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

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

开发者工具的新变化系列中涵盖的所有内容的列表。