本文转载于:猿2048网站➵
转载自 https://blog.vvvvvvvvvvvvvvv.com/2018/05/28/whats-new-in-devtools-Chrome-68/index.html
由 Chrome官方文章 翻译, 建议查看英文原文, 作为程序员, 读懂官方文档应当是必备的技能(因为译文包含了译者的思维, 不一定能精确的表达原文想要表达的思维). 能拿到这些 '核心数据' 也是必备的技能
Notes: 这些发布说明的视频版本大约在 2018.7 月底左右发行
新的 Chrome 68 开发者工具:
- Eager Evaluation(即刻求值). 当你键入表达式时, 控制台会预览结果.
- Argument hints(参数提示). 当你键入函数, 控制台会向你展示该函数期望的参数.
- Function autocompletion(函数自动补全). 在你键入一个函数调用后, 如
document.querySelector('p'), 控制台会向你展示返回值支持的函数和属性. - ES2017 keywords in the Console(ES2017 控制台关键词). 关键字, 如
await, 现在已经支持在控制台的自动补全. - Lighthouse 3.0 in the Audits panel. 更快, 更一致的 audit(审查), 新 UI, 和新的审查工具.
BigIntsupport(BigInt 支持). 在控制台尝试 JavaScript 的新的 arbitrary-precision integer(任意精度的整形数字).- Adding property paths to the Watch pane(在 Watch 面板增加 添加属性路径)
- "Show timestamps" moved to Settings("显示时间戳" 移动到 设置 里).
Notes: 运行 chrome://version 来检查你的 Chrome 版本. 如果你正在运行的是之前版本, 这些特性不会存在. 如果你正在运行的是之后版本(译者注: 比当前版本新), 这些特征有可能被改变. Chrome 大约每 6 周自动更新到一个新的主版本.
辅助工具控制台
Chrome 68 带来了一些新的关于自动补全和预览的控制台特性
Eager Evaluation(即刻求值)
当你在控制台键入表达式的时候, 控制台现在可以在你的指针下面显示这个表达式的预览结果.
图片 1: 在控制台明确的执行之前会打印 sort() 操作的结果.
开启 Eager Evaluation(即刻求值):
- 打开 控制台
- 打开 控制台设置
- 打开 Eager evaluation 复选框
如果表达式有副作用, 开发者工具不会立即求值
Argument hints(参数提示)
但你键入函数调用的时候, 控制台现在向你显示这个函数所期望的参数.
图片 2: 控制台的参数提示的几个例子
Notes:
- 一个问号在参数前, 例如
?options, 代表这是一个可选参数. - 一个省略号在参数前, 例如
...items, 代表这是一个 spread 类型参数. - 一些函数, 例如
CSS.supports(), 接受多个参数签名.
Autocomplete after function executions(在函数调用之后的自动补全)
Notes: 该特性依赖 Eager Evaluation(即刻求值), 其需要从控制台设置中开启
在开启 Eager Evaluation(即刻求值) 之后, 控制台也会向你显示在调用一个函数之后, 其有效的属性和函数.
图片 3: 上面的截图展示了老的行为, 下面的截图展示了支持函数补全的新的行为
ES2017 keywords in autocomplete(ES2017 关键词补全)
ES2017 关键词, 如 await, 现在已经支持在控制台的自动补全
图片 4: 控制台现在在自动补全的 UI 上建议 await
Faster, more reliable audits, a new UI, and new audits(更快, 更一致的 audit(审查), 新 UI, 和新的审查工具)
Chrome 68 带来了 Lighthouse 3.0, 接下来的这一段聚合了一些大的改变, 全部改变另见 Announcing Lighthouse 3.0
更快, 更一致的审查
Lighthouse 3.0 拥有新的内部审查引擎, 代号为 Lantern, 其更快的完成你的审查和在运行时有更少的差异.
新的 UI
Lighthouse 3.0 也带来了新的 UI, 感谢在 Lighthouse 和 Chrome UX (Research & Design) 团队之间的合作.
图片 5: Lighthouse 3.0 的新的报告 UI
新的 审查工具
Lighthouse 3.0 也带来了 4 个新的审查工具:
- First Contentful Paint
- robots.txt is not valid (robots.txt 文件无效)
- Use video formats for animated content (对于动画的内容使用视频格式)
- Avoid multiple, costly round trips to any origin (避免多次, 昂贵的往返任何来源)
BigInt support (BigInt 支持)
Note: 这个不是开发者工具的特性, 但是这是一个可以在控制台体验的新的 JavaScript 能力.
Chrome 68 支持一个新的数字型的原始类型, 叫 BigInt, BigInt 允许你申明一个任意精度的整型数字. 在控制台尝试一下:
图片 6: 控制台里的一个 BigInt 例子
Add property path to watch(向 watch 添加一个属性路径)
在断点处暂停的时候, 在 Scope 面板右击一个属性, 然后选择 Add property path to watch 来添加这个属性到 Watch 面板.
图片 7: Add property path to watch 的一个例子
感谢 PhistucK 的贡献
"Show timestamps" moved to settings("显示时间戳" 移动到 设置 里)
以前在 Console Settings 中的 Show timestamps 复选框被移动到 Settings.
Consider Canary(考虑 Canary)(译者注: 考虑成为金丝雀)
如果你在使用 Mac 或者是 Windows, 请考虑使用 Chrome Canary 作为你的默认开发浏览器. 如果你报告了一个你不喜欢的但是却仍然在 Canary 中存在的 bug 或者是 change, 开发者工具团队可以显著的更快的处理你的反馈.
Note: Canary 是 Chrome 的最新版本, 其一旦被 build 就会发布, 没有测试. 这意味着 Canary 时不时的会崩溃, 大概一月一次, 并且通常在一天之内被修复. 你可以在 Canary 崩溃的时候继续使用 Chrome Stable(稳定版 Chrome).