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

Chrome 62 中开发者工具将引入的新功能和变更:

控制台中的顶级等待运算符

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

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

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

新的屏幕截图工作流程

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

视口的一部分的屏幕截图

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

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

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

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

特定 HTML 节点的屏幕截图

如需对特定 HTML 节点截取屏幕截图,请执行以下操作:

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

    节点示例

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

  2. 打开命令菜单

  3. 开始输入 node,然后选择 Capture node screenshot。开发者工具会下载所选节点的屏幕截图。

    “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() 的范围是控制台中当前选定的执行上下文。请参阅选择执行上下文

新的控制台过滤条件

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

否定过滤条件

过滤框中输入 -<text>,以滤除包含 <text> 的所有控制台消息。

将被滤除的 3 条消息示例

图 6. 第一个语句将 onetwothreefour 记录到控制台中。由于在过滤条件框中输入了 -two,因此 two 已隐藏

如果找到 <text>,则开发者工具会滤除消息:

  • 在消息文字中。
  • 在发出邮件的文件名中。
  • 在堆栈轨迹文本中。

否定过滤条件还可以与正则表达式(如 -/[4-5]*ms/)配合使用。

网址过滤条件

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

该过滤条件使用模糊匹配。如果 <text> 显示在网址的任何位置,则开发者工具会显示相应消息。

网址过滤示例

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

“Network”面板中的 HAR 导入

将 HAR 文件拖放到 Network 面板中以将其导入。

导入 HAR 文件

图 8. 导入 HAR 文件

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

点击 Cache Storage 表格中的某一行,即可在表格下方预览该资源。

预览缓存资源

图 9. 预览缓存资源

缓存调试响应速度更快

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

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

请参阅缓存存储空间演示,亲自尝试一下。

块级代码覆盖率

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

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

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

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

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

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

下载预览渠道

您可以考虑将 Chrome Canary 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59