此页面由 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 示例

添加要监视的属性路径

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

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

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

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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