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

Kayce Basques

Chrome 68 中 DevTools 的新功能：

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

辅助控制台

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

及早评估

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

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

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

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

  1. 打开控制台。
  2. 打开控制台设置 “控制台设置”按钮。
  3. 选中提前评估复选框。

如果表达式会导致副作用，DevTools 不会提前求值。

参数提示

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

控制台中的参数提示。

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

注意：

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

函数执行后的自动补全

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

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

图 3. 顶部的屏幕截图显示了旧行为，而底部的屏幕截图显示了支持函数自动补全的新行为

自动补全中的 ES2017 关键字

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

控制台现在会在其自动补全界面中建议使用“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 项新审核：

  • First Contentful Paint
  • robots.txt 无效
  • 使用视频格式呈现动画内容
  • 避免多次往返任何来源，这会产生高昂的费用

BigInt 支持

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

控制台中的 BigInt 示例。

图 6. 控制台中的 BigInt 示例

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

在某个断点处暂停时，右键点击“作用域”窗格中的某个属性，然后选择向监视表达式添加属性路径，将该属性添加到“监视”窗格中。

向监视表达式添加属性路径的示例。

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

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。