此页面由 Cloud Translation API 翻译。

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

Kayce Basques

Chrome 68 中的开发者工具新功能：

Eager Evaluation。输入表达式时，控制台会预览结果。
参数提示。在您输入函数时，控制台会显示该函数的预期参数函数。
函数自动补全。输入函数调用（例如 document.querySelector('p')）后，控制台会显示返回值支持的函数和属性。
控制台中的 ES2017 关键字。诸如await之类的关键字现在可在控制台的自动填充界面。
“Audits”面板中的 Lighthouse 3.0。更快速、更一致的审核、新的界面和新的审核。
BigInt 支持。在控制台中试用 JavaScript 的全新任意精度整数。
向“监视”窗格添加属性路径。将“Scope”（作用域）窗格中的属性添加到 Watch 窗格。
“显示时间戳”已移至“设置”。

注意：请前往 chrome://version 检查您运行的 Chrome 版本。如果您在使用这些功能就不存在了。如果你运行的是更高版本都发生了哪些变化Chrome 大约每 6 周会自动更新到新的主要版本。

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

辅助控制台

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

即刻评估

现在，当您在控制台中输入表达式时，控制台可以显示相关结果的预览表达式。

控制台会在明确执行排序() 操作之前输出其结果。

图 1. 控制台会在执行相应操作之前输出 sort() 操作的结果。已明确执行

如需启用 Eager Evaluation，请执行以下操作：

打开控制台。
打开管理中心设置 。
选中 Eager 评估复选框。

DevTools 不会急于评估表达式是否会导致附带效应。

参数提示

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

控制台中的参数提示。

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

注意：

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

函数执行后自动补全

启用 Eager Evaluation 后，控制台现在还会向您显示可用。

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

图 3. 上面的屏幕截图表示旧行为，底部的屏幕截图表示支持函数自动补全的新行为

自动补全中的 ES2017 关键字

ES2017 关键字（例如 await）现在可在控制台的自动补全界面中使用。

控制台现在显示“await”自动创建

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

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

Chrome 68 随附了 Lighthouse 3.0。接下来的部分将概括介绍一些最显著的变化。如需了解完整的故事，请参阅发布 Lighthouse 3.0。

更快、更可靠的审核

Lighthouse 3.0 具有新的内部审核引擎（代号为 Lantern），可完成您的审核且运行之间的差异更少。

新界面

得益于 Lighthouse 与 Chrome 用户体验的合作，Lighthouse 3.0 还推出了新的界面（研究和设计）团队的协助。

Lighthouse 3.0 中的全新报告界面。

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

新审核

Lighthouse 3.0 还附带了 4 项新的审核功能：

首次内容绘制
robots.txt 无效
为动画内容使用视频格式
避免与任何出发地进行多次昂贵的往返行程

BigInt 支持

Chrome 68 支持一个名为 BigInt 的新数字基元。BigInt可用来代表任意精度的整数。在控制台中试用：

控制台中的 BigInt 示例。

图 6. 控制台中的 BigInt 示例

添加要监视的属性路径

在断点处暂停时，右键点击“作用域”窗格中的属性，然后选择添加属性指向 Watch 的路径，将该属性添加到“Watch”窗格。

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

图 7. 添加要监视的属性路径示例

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

之前在控制台设置中勾选了显示时间戳复选框。已移至设置。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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