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

Kayce Basques

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

• 及早评估。在您输入表达式时，控制台会预览结果。
• 实参提示。在您输入函数时，控制台会显示该函数所需的实参。
• 函数自动补全。在输入 document.querySelector('p') 等函数调用后，控制台会显示返回值支持的函数和属性。
• 控制台中的 ES2017 关键字。控制台的自动补全界面中现在提供 await 等关键字。
• “审核”面板中的 Lighthouse 3.0。更快、更一致的审核、新界面和新审核。
• BigInt 支持。在控制台中试用 JavaScript 的新任意精度整数。
• 向“监视”窗格添加属性路径。将“范围”窗格中的属性添加到“监视”窗格。
• “显示时间戳”已移至“设置”。

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

辅助控制台

Chrome 68 随附了一些与自动补全和预览相关的新控制台功能。

及早评估

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

图 1. 控制台在 sort() 操作被明确执行之前就打印了该操作的结果

如需启用及早评估，请执行以下操作：

1. 打开控制台。
2. 打开控制台设置图标 。
3. 选中急切评估复选框。

如果表达式会导致副作用，开发者工具不会急于评估。

实参提示

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

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

注意：

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

在函数执行后自动补全

启用抢先评估后，控制台现在还会显示您在输入函数后可用的属性和函数。

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

自动补全中的 ES2017 关键字

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

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

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

Chrome 68 附带 Lighthouse 3.0。以下部分汇总了一些最重要的变更。 如需了解完整详情，请参阅发布 Lighthouse 3.0。

更快、更可靠的审核

Lighthouse 3.0 采用了一个新的内部审核引擎（代号为 Lantern），可更快地完成审核，并且每次运行之间的差异更小。

新界面

Lighthouse 3.0 还带来了全新的界面，这得益于 Lighthouse 团队与 Chrome 用户体验（研究与设计）团队的协作。

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

新审核

Lighthouse 3.0 还附带 4 项新的评估：

• First Contentful Paint
• robots.txt 无效
• 使用视频格式制作动画内容
• 避免多次往返于任何出发地，从而节省高昂的费用

BigInt 支持

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

图 6. 控制台中的 BigInt 示例

向监视表达式添加属性路径

在断点处暂停时，右键点击“Scope”（范围）窗格中的某个属性，然后选择 Add property path to watch（添加属性路径以进行监视），将该属性添加到“Watch”（监视）窗格。

图 7. 向监视表达式添加属性路径的示例

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

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

下载预览渠道

不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试最前沿的 Web 平台 API，并在用户发现问题之前帮助您找到网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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