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

Kayce Basques

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

控制台中的顶层 await 运算符

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

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

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

新的屏幕截图工作流程

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

部分视口的屏幕截图

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

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

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

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

特定 HTML 节点的屏幕截图

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

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

    节点示例

    图 3. 在本示例中，目标是对包含 文本 Tools。请注意，此节点已在 DOM 树的 元素面板

  2. 打开命令菜单。

  3. 开始输入 node，然后选择 Capture node screenshot。开发者工具会下载 节点。

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

    图 4. Capture node screenshot 命令的结果

CSS 网格突出显示

要查看影响某个元素的 CSS 网格，请将鼠标悬停在 DOM 树元素中的相应元素上， 元素面板。每个网格项周围都会显示虚线边框。仅当 已对所选项（或其父级）应用了 display:grid。

突出显示 CSS 网格

图 5. 突出显示 CSS 网格

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

用于查询堆对象的新 API

从控制台调用 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 视频发表评论。

开发者工具的新变化

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