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

Chrome 68 中的开发者工具的新变化:

请阅读下面的版本说明,或观看视频版本的说明。

辅助控制台

Chrome 68 附带了一些与自动补全和预览相关的 Play 管理中心新功能。

Eager 评估

现在,当您在控制台中输入表达式时,控制台可以在光标下方显示该表达式的结果预览。

控制台会输出 sort()操作在显式执行之前的结果。

图 1. 控制台会输出 sort() 操作在显式执行之前的结果

如需启用即时评估,请执行以下操作:

  1. 打开控制台
  2. 打开 Console Settings 图标 “控制台设置”按钮
  3. 启用 Eager 评估复选框。

开发者工具不会立即评估表达式是否会导致附带效应

参数提示

现在,当您输入函数时,控制台会显示函数所需的参数。

控制台中的参数提示。

图 2. 控制台中的参数提示的各种示例

注意:

  • 参数前面的问号(如 ?options)表示可选参数。
  • 参数(例如 ...items)前面的省略号表示“分散”。
  • 某些函数(例如 CSS.supports())接受多个参数签名。

函数执行后自动补全

启用即时评估后,控制台现在还会向您显示在您输入函数后可用的属性和函数。

运行 document.querySelector('p') 现在,控制台可以向您显示该元素的可用属性和函数。

图 3. 顶部的屏幕截图表示旧行为,底部的屏幕截图表示支持函数自动补全功能的新行为

自动补全中的 ES2017 关键字

控制台的自动补全界面中现已提供 ES2017 关键字(例如 await)。

控制台现在会在其自动补全界面中建议“await”。

图 4. 控制台现在会在其自动补全界面中建议 await

更快、更可靠的审核、新的界面和新的审核

Lighthouse 3.0 现已发布 Chrome 68。接下来的部分将简要介绍一些重大变更。如需了解完整内容,请参阅正式发布 Lighthouse 3.0

更快、更可靠的审核

Lighthouse 3.0 采用了新的内部审核引擎(代号为 Lantern),该引擎可更快速地完成审核,并可减少各次运行之间的差异。

新界面

Lighthouse 3.0 还推出了一个新的界面,这得益于 Lighthouse 和 Chrome 用户体验(研究和设计)团队之间的协作。

Lighthouse 3.0 中的全新报告界面。

图 5. Lighthouse 3.0 中的全新报告界面

新审核

Lighthouse 3.0 还推出了 4 项新的审核:

  • First Contentful Paint
  • robots.txt 无效
  • 为动画内容使用视频格式
  • 避免往返任何出发地的多次往返行程

BigInt 支持

Chrome 68 支持一个名为 BigInt 的新数字基元。BigInt 可用于表示具有任意精度的整数。在控制台中试用:

控制台中的 BigInt 示例。

图 6. 控制台中的 BigInt 示例

添加要监视的属性路径

在某个断点处暂停时,右键点击“Scope”窗格中的属性,然后选择 Add property path to watch,将该属性添加到“Watch”窗格中。

要监视的“添加属性路径”示例。

图 7. 关于向手表添加属性路径的示例

“显示时间戳”已移至“设置”

之前在控制台设置 “控制台设置”按钮 中的显示时间戳复选框已移至设置

下载预览渠道

您可以考虑将 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