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

Kayce Basques

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

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

辅助控制台

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

即刻评估

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

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

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

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

  1. 打开控制台。
  2. 打开管理中心设置 控制台“设置”按钮。
  3. 选中 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 视频发表评论。

开发者工具的新变化

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