DevTools 新功能(Chrome 102)

Published on Updated on

Translated to: English, Español, Português, 한국어, Pусский, 日本語

感谢 韩昌浩 提供的翻译

有兴趣帮忙改进 DevTools 吗?请注册并参与 Google 用户体验调研

预览功能:新的 Performance insights 面板

利用 Performance insights 面板来获取关于您网站性能的可行性深度分析。面板将按照您的用例提供可行性的建议和回馈。

打开此面板并根据您的用例来开始一段新的录制。举个例子,让我们来测量这个示例网页的页面加载情况。

新的 Performance insights 面板

录制完成后,您会在 Insights 窗格中获得相关的性能深度分析。 单击每个深度分析项目(例如,阻止渲染的请求、布局偏移)以了解问题和潜在的修复。

前往 Performance insights 面板的文档并通过教程来逐步了解更多内容。

这是一项预览功能,可帮助 Web 开发人员(尤其是非性能专家)识别和修复潜在的性能问题。 我们的团队正在积极开发此功能,并期待获得您的反馈 以进一步改进。

Chromium 议题: 1270700

新的模拟浅色和深色主题的快捷方式

您现在可以在样式边栏中利用新的快捷方式来更快速地模拟浅色和深色主题(CSS 媒体功能 prefers-color-scheme)。

在此之前,在渲染标签页中模拟主题需要更多步骤。

新的模拟浅色和深色主题的快捷方式

Chromium 议题: 1314299

提升网络预览标签页的安全性

网络面板中的预览标签页现在应用了内容安全政策(CSP)。

例如,第一个屏幕截图显示了一个包含混合内容的页面。该页面通过安全的 HTTPS 连接加载,但样式表通过不安全的 HTTP 连接加载。

浏览器默认阻止样式表请求。但是,当您通过网络面板中的预览标签页打开页面时,样式表此前并没有被阻止(因此背景变成了红色)。现在像您期望的那样,该样式表被阻止了(第二个屏幕截图)。

提升网络预览标签页的安全性

Chromium 议题: 833147

提升在断点处的重新加载

调试程序现在会在断点处重新加载时停止脚本执行。

例如,之前在这个 React 示例 中的 ReactDOM 断点处重新加载时,脚本进入了无限循环。来源面板由于无限循环而崩溃。

继续执行 JavaScript 会给开发人员带来很多麻烦,并且可能会使渲染程序处于损坏状态。这项更改使调试行为与 Firefox 等其他浏览器保持一致。

提升在断点处的重新加载

Chromium 议题: 1014415, 1004038, 1112863, 1134899

控制台更新

在控制台中处理脚本执行错误

控制台中脚本评估期间的错误现在会生成正确的错误事件,这些事件会触发 window.onerror 处理程序,并在窗口对象上作为 "error" 事件进行调度。

在控制台中处理脚本执行错误

Chromium 议题: 1295750

通过回车键提交实时表达式

一旦您完成了一个实时表达式 的输入,您即可通过回车键来提交它。在此之前,按回车键会导致添加新行。这行为与 DevTools 的其他部分不一致。

使用 Shift + 回车键 来添加新行。

通过回车键提交实时表达式

Chromium 议题: 1260744

在用户流程录制开始时取消

您可以在用户流程录制开始时取消录制。此前没有办法取消录制。

在用户流程录制开始时取消

Chromium 议题: 1257499

在样式边栏中展示继承的高亮伪元素

现在,在样式边栏中可以看到继承的高亮伪元素(例如 ::selection::spelling-error::grammar-error、以及 ::highlight)。

正如规范中提到的,当多个样式冲突时,CSS 层叠决定了优先的样式。此新功能可帮助您了解层叠规则的继承和优先级。

目前,您需要使用 --enable-blink-features=HighlightInheritance 的命令行选项运行 Chrome 以启用此功能。

在样式边栏中展示继承的高亮伪元素

Chromium 议题: 1024156

其它的更新

以下是此版本中一些值得注意的修复:

  • 属性边栏现在默认显示带有值的访问器属性。在此之前,这些值被错误地隐藏了。(1309087
  • 样式边栏现在正确地用删除线显示被覆盖的 @supports 规则。在此之前,被覆盖的这些规则没有删除线。(1298025
  • 修复了来源面板中的 CSS 格式化逻辑,该逻辑在编辑 CSS 时会导致多个空行。(1309588
  • 控制台中对象的以递归方式展开选项限制为最大100层,这样它就不会在展开循环引用的对象时陷入无限循环。(1272450

[实验阶段] 复制 CSS 更改

请在设置 > 实验中勾选 Sync CSS changes in the Styles pane 来开启此实验功能。

在此实验中,样式边栏用绿色突出显示您的 CSS 更改。您可以将鼠标悬停在更改的规则上,然后单击它旁边新的复制按钮进行复制。

除此之外,您可以通过右键单击任何 CSS 规则并选择复制所有 CSS 更改来跨 CSS 声明复制所有 CSS 更改。

变更标签页中还添加了一个新的复制按钮,以帮助您轻松跟踪和复制 CSS 更改!

复制 CSS 更改

Chromium 议题: 1268754

[实验阶段] 在浏览器外选择颜色

请在设置 > 实验中勾选 Enable color picking outside the browser window 来开启此实验功能。

启用此实验以使用颜色选择器在浏览器之外选择颜色。在此之前,您只能在浏览器内选择颜色。

样式边栏中,单击任何颜色预览以打开颜色选择器。使用吸管从任何地方选择颜色。

在浏览器外选择颜色

Chromium 议题: 1245191

下载 Chrome 预览版本

您可以考虑把 Chrome Canary 版, 开发者版(Dev)测试版(Beta) 设置为默认开发浏览器。这些预览版本能让你抢先体验处于 DevTools 开发阶段的新功能、测试最新的网络平台 API ,让您抢先在用户之前发现您网站上的问题!

联系 Chrome DevTools 团队

您可以透过一下渠道讨论这篇文章的新功能和改进,或一切关于 DevTools 的一切。

  • 提交建议或意见回馈:crbug.com.
  • 报告 DevTools 问题:打开 DevTools,按 更多选项图标   More   > 帮助 > 报告 DevTools 问题
  • 在推特上,发推文: @ChromeDevTools.
  • 在我们的 What's new in DevTools YouTube 视频底下留言。

更多 DevTools 的功能

欲查询完整的 DevTools 已发布的功能,请参考 What's New In DevTools 英文系列。以下是部分已翻译成中文的内容。

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.