此页面由 Cloud Translation API 翻译。

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

Kayce Basques

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

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

注意：您可以访问 chrome://version，检查您运行的 Chrome 版本。Chrome 大约每 6 周会自动更新到新的主要版本。

控制台中的顶层 await 运算符

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

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

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

新的屏幕截图工作流程

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

部分视口的屏幕截图

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

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

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

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

特定 HTML 节点的屏幕截图

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

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

图 3. 在此示例中，目标是对包含文本 Tools 的蓝色标题进行截图。请注意，此节点已在 Elements 面板的 DOM 树中处于选中状态。
打开命令菜单。
开始输入 node，然后选择 Capture node screenshot。开发者工具会下载所选节点的屏幕截图。

图 4. Capture node screenshot 命令的结果

CSS 网格突出显示

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

突出显示 CSS 网格

图 5. 突出显示 CSS 网格

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

用于查询堆对象的新 API

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

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

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

控制台中的新过滤条件

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

排除性过滤条件

在 Filter 框中输入 -<text> 可过滤掉包含 <text> 的所有 Console 消息。

将被滤除的 3 封邮件的示例

图 6. 第一条语句将 one、two、three 和 four 记录到 Console 中。由于在过滤条件框中输入了 -two，因此 two 已隐藏

如果发现 <text>，开发者工具会滤除消息：

在消息文字中。
在来源文件名中。
在堆栈轨迹文本中。

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

网址过滤器

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

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

网址过滤示例

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

“网络”面板中的 HAR 导入

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

导入 HAR 文件

图 8. 导入 HAR 文件

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

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

预览缓存资源

图 9. 预览缓存资源

响应速度更快的缓存调试

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

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

您可以参阅缓存存储演示，自行尝试一下。

块级代码覆盖率

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

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

图 10. Chrome 61 中的覆盖率标签页示例。第 4 行标记为“已使用” 虽然它从不执行

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

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

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

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

请通过 crbug.com 提交建议或反馈。
在开发者工具中使用更多选项 > 帮助 > 报告开发者工具问题来报告开发者工具问题。
请发送电子邮件至 @ChromeDevTools。
请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。