// 每日前端夜话 第371篇
// 正文共:2700 字
// 预计阅读时间:10 分钟
DevTools 是开发和测试 Web 应用时最有用的工具之一。在Chrome 85 中,DevTools 做了一些改进,例如:
respondWith
事件,该事件记录了 service worker fetch
事件处理运行 promise 所达成的时间(issue #1066579[1])这些都是有用的更改,但是在本文中,我将回顾与样式编辑和新的 JavaScript 功能相关的更改,以及 Source 和 Performance 面板中的改进。
在你阅读本文时,很可能 Chrome 85 将会成为主流的稳定版本。在撰写本文时(2020年7月30 日),你只能通过下载 Chrome 的开发版本[6]来获得 Chrome 85。你可以在 Chrome 发行渠道[7] 页面上了解有关 Chrome 发行版本的更多信息。
通过即时编辑代码或样式来实时查看是 DevTools 最有用的功能之一。
使用 CSS 样式时,可以选择用 CSS 对象模型[8](CSSOM)API 以编程的方式操作 CSS 规则:
const style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('#myDiv {background-color: blue; color: yellow}');
但是,DevTools 不允许你编辑以这种方式创建的样式。
不过这在 Chrome 85 中已经得到改进[9]。从此版本开始,你可以编辑用 CSSOM API 构建的样式,尤其是在使用 CSSStyleSheet.insertRule
、CSSStyleSheet.deleteRule
、CSSStyleDeclaration.setProperty
和 CSSStyleDeclaration.removeProperty
时。
这也适用于 LitElement 之类的库或 React Native for web。
即使在打开 DevTools 之后插入样式,这些样式也是可编辑的,这也适用于 Constructable Stylesheets[10],目前仅在 Chrome 中可用[11]。
可构造样式表允许你通过调用 CSSStyleSheet()
构造函数,用 replace()
和 `replaceSync()`[12] 添加和更新样式表规则来创建样式表。
const sheet = new CSSStyleSheet();
sheet.replaceSync('#myDiv {background-color: blue; color: yellow}');
document.adoptedStyleSheets = [sheet];
Chrome 使用 Acorn[13] 在 DevTools 控制台中解析 JavaScript。
在 Chrome 85 中,[Acorn 已更新至版本 7.3.0[14],除了其他改进外,还增加了对可选链运算符的支持( ?.
)。
通过使用可选的链运算符[15],就不必像下面这样写代码:
if (user && user.name && user.name.last)
lastName = user.name.last.toUpperCase();
你可以这样写:
lastName = user?.name?.last?.toUpperCase();
但是直到 Chrome 84,该操作符的自动完成功能仍不被支持:
chrome 84中的可选链
现在,控制台中的属性自动完成功能可以与此操作符(user?.
)一起使用,就像你使用 user.
或 user[
一样:
chrome 85 中的可选链
其他两个更改与 sources 面板中的语法突出显示有关。
在 Chrome 84 之前,私有字段和方法[16]显示为白色文本。在某些情况下,甚至该行的其余部分也显示为白色:
chrome 85之前的私有字段
sources 面板使用 CodeMirror[17] 显示代码。
在 Chrome 85 中,CodeMirror 已更新至版本 5.54.0[18] 此版本改进了对私有属性和类字段的解析[19]:
chrome 85之后的私有字段
最后一个关于 JavaScript 新功能的改进是关于 nullish 合并运算符[20]。
在 Chrome 85 之前的版本中,当代码包含以下运算符时,代码格式会被破坏:
Chrome 85之前的 nullish 合并
但是现在它被修正了[21],并且格式可以正常使用:
chrome 85之后 nullish 的合并
**Sources ** 面板还有其他有用的更改。
现在,我们有了即使没有选择任何内容,也可以在编辑器中复制或剪切当前行的功能[22]。
只需要把光标放在要复制或剪切的行的末尾,然后按相应的键盘快捷键:
将光标放在要复制或剪切的行的末尾,然后按相应的键盘快捷键
另一个改进是,如果你使用 WebAssembly 文件,则编辑器会显示 Wasm 模块字节码(十六进制)偏移量[23] :
编辑器现在显示字节码(十六进制)偏移量
最后是断点,条件断点和日志断点的新图标[24]。
他们的样子如下:
chrome 85之前的断点
同样,这就是他们在深色模式下的样子:
深色模式下的断点
现在它们更加丰富多彩:
chrome 85中的多色断点
我认为,这提高了断点图标的可读性,尤其是在启用暗模式时:
深色模式下的Chrome 85断点
DevTools 的 Performance 面板中有两项重要更改。
关于第一个脚本,直到 Chrome 84,如果未缓存给定脚本,DevTools 不会显示缓存信息:
编译之前
现在,缓存信息总是显示在摘要标签中[25],显示了未进行缓存的原因:
编译之后
第二个变化与录制规则中显示的时间有关。
在以前的版本中,时间是根据录制的开始时间显示的:
记录规则中显示的时间
请注意,第二页的 FCP 显示的时间戳为 8907 毫秒。这是从录制开始到事件发生的时间。
现在,时间与用户导航的位置有关[26]:
chrome 85中的时间戳
在上面的例子中,第二页 FCP 的时间戳为 901.1 毫秒,即该事件在页面加载后发生的时间。
在本文中,我们浏览了 Chrome 85中 DevTools 的最重要更改。但是我没有深入探讨本文开头所提到的四项改进,但是你可以在这里查看相关的内容[27]。
最后,请记住,你可以通过下载Chrome Canary[28] 或Chrome 开发版[29]来使用最新的 DevTools 功能。
作者:Esteban Herrera 翻译:疯狂的技术宅 原文:https://blog.logrocket.com/whats-new-in-devtools-chrome-85/
精彩文章回顾,点击直达
[1]
#1066579: https://crbug.com/1066579
[2]
#1082963: https://crbug.com/1082963
[3]
#1055875: https://crbug.com/1055875
[4]
#955497: https://crbug.com/955497
[5]
#1073899: https://crbug.com/1073899
[6]
Chrome 的开发版本: https://www.google.com/chrome/dev/
[7]
Chrome 发行渠道: http://www.chromium.org/getting-involved/dev-channel
[8]
CSS 对象模型: https://drafts.csswg.org/cssom/
[9]
不过这在 Chrome 85 中已经得到改进: https://bugs.chromium.org/p/chromium/issues/detail?id=946975
[10]
Constructable Stylesheets: https://developers.google.com/web/updates/2019/02/constructable-stylesheets
[11]
仅在 Chrome 中可用: https://chromestatus.com/feature/5394843094220800
[12]
replaceSync()
: https://wicg.github.io/construct-stylesheets/#dom-cssstylesheet-replacesync
[13]
Acorn: https://github.com/acornjs/acorn
[14]
[Acorn 已更新至版本 7.3.0: https://bugs.chromium.org/p/chromium/issues/detail?id=1083214
[15]
可选的链运算符: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
[16]
私有字段和方法: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/Private_class_fields
[17]
CodeMirror: https://codemirror.net/
[18]
CodeMirror 已更新至版本 5.54.0: https://bugs.chromium.org/p/chromium/issues/detail?id=1073903
[19]
改进了对私有属性和类字段的解析: https://js.libhunt.com/codemirror-changelog/5.54.0
[20]
nullish 合并运算符: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
[21]
它被修正了: https://bugs.chromium.org/p/chromium/issues/detail?id=1083797
[22]
即使没有选择任何内容,也可以在编辑器中复制或剪切当前行的功能: https://bugs.chromium.org/p/chromium/issues/detail?id=800028
[23]
显示 Wasm 模块字节码(十六进制)偏移量: https://bugs.chromium.org/p/chromium/issues/detail?id=1071432
[24]
断点,条件断点和日志断点的新图标: https://bugs.chromium.org/p/chromium/issues/detail?id=1041830
[25]
总是显示在摘要标签中: https://bugs.chromium.org/p/chromium/issues/detail?id=912581
[26]
时间与用户导航的位置有关: https://bugs.chromium.org/p/chromium/issues/detail?id=974550
[27]
查看相关的内容: https://developers.google.com/web/updates/2020/06/devtools
[28]
Chrome Canary: https://www.google.com/chrome/canary/
[29]
Chrome 开发版: https://www.google.com/chrome/dev/