开发者工具又加了什么好东西?(Chrome 68)

转载自 blog.vvvvvvvvvvvvvvv.com/2018/05/28/…

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, 和新的审查工具.
  • BigInt support(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(即刻求值)

当你在控制台键入表达式的时候, 控制台现在可以在你的指针下面显示这个表达式的预览结果.

eagereval

图片 1: 在控制台明确的执行之前会打印 sort() 操作的结果.

开启 Eager Evaluation(即刻求值):

  1. 打开 控制台
  2. 打开 控制台设置 settings
  3. 打开 Eager evaluation 复选框

如果表达式有副作用, 开发者工具不会立即求值

Argument hints(参数提示)

但你键入函数调用的时候, 控制台现在向你显示这个函数所期望的参数.

arghints

图片 2: 控制台的参数提示的几个例子

Notes:

  • 一个问号在参数前, 例如 ?options, 代表这是一个可选参数.
  • 一个省略号在参数前, 例如 ...items, 代表这是一个 spread 类型参数.
  • 一些函数, 例如 CSS.supports(), 接受多个参数签名.

Autocomplete after function executions(在函数调用之后的自动补全)

Notes: 该特性依赖 Eager Evaluation(即刻求值), 其需要从控制台设置中开启 settings

在开启 Eager Evaluation(即刻求值) 之后, 控制台也会向你显示在调用一个函数之后, 其有效的属性和函数.

autocomplete

图片 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) 团队之间的合作.

lighthouse3

图片 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 允许你申明一个任意精度的整型数字. 在控制台尝试一下:

bigint

图片 6: 控制台里的一个 BigInt 例子

Add property path to watch(向 watch 添加一个属性路径)

在断点处暂停的时候, 在 Scope 面板右击一个属性, 然后选择 Add property path to watch 来添加这个属性到 Watch 面板.

watch

图片 7: Add property path to watch 的一个例子

感谢 PhistucK 的贡献

"Show timestamps" moved to settings("显示时间戳" 移动到 设置 里)

以前在 Console Settingssettings 中的 Show timestamps 复选框被移动到 Settings.

Consider Canary(考虑 Canary)(译者注: 考虑成为金丝雀)

如果你在使用 Mac 或者是 Windows, 请考虑使用 Chrome Canary 作为你的默认开发浏览器. 如果你报告了一个你不喜欢的但是却仍然在 Canary 中存在的 bug 或者是 change, 开发者工具团队可以显著的更快的处理你的反馈.

Note: Canary 是 Chrome 的最新版本, 其一旦被 build 就会发布, 没有测试. 这意味着 Canary 时不时的会崩溃, 大概一月一次, 并且通常在一天之内被修复. 你可以在 Canary 崩溃的时候继续使用 Chrome Stable(稳定版 Chrome).

关注下面的标签,发现更多相似文章
评论
说说你的看法