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

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. 第一条语句将 onetwothreefour 记录到 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 视频发表评论。

开发者工具的新变化

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