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

Jecelyn Yeen

预览版功能：新增的“性能数据分析”面板

使用性能洞察面板，获取有关网站性能的实用且以使用情形为导向的洞察信息。

打开面板，然后根据您的使用情形开始新的录制。例如，我们来衡量一下此演示网页的网页加载情况。

录制完成后，您会在洞察窗格中看到效果分析。点击每个数据洞见项（例如，渲染阻塞请求、布局偏移），了解问题和潜在的修复方法。

如需通过分步教程了解详情，请参阅性能分析数据面板文档。

这是一项预览版功能，旨在帮助 Web 开发者（尤其是非性能专家）发现并修复潜在的性能问题。我们的团队正在努力完善此功能，期待您的反馈，以便进一步改进。

Chromium 问题：1270700

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

现在，您可以使用样式窗格中的新快捷方式，更快地模拟浅色和深色主题（CSS 媒体功能 prefers-color-scheme）。

以前，在渲染标签页中模拟主题需要执行更多步骤。

Chromium 问题：1314299

改进了“网络预览”标签页的安全性

开发者工具现在会在网络面板的预览标签页中应用内容安全政策 (CSP)。

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

浏览器默认阻止了样式表请求。不过，当您通过网络面板中的预览标签页打开网页时，样式表之前未被屏蔽（因此背景变为红色）。现在，它已按预期被屏蔽（第二张屏幕截图）。

Chromium 问题：833147

改进了在断点重新加载

调试器现在会在重新加载时在断点处终止脚本执行。

例如，在设置和重新加载此 React 演示中的 ReactDOM 断点时，脚本之前会进入无限循环。由于无限循环，来源面板中断。

继续执行 JavaScript 会给开发者带来很多麻烦，并可能导致渲染器处于损坏状态。此变更使调试行为与其他浏览器（如 Firefox）保持一致。

Chromium 问题：1014415、1004038、1112863、1134899

Console 更新

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

控制台中脚本评估期间发生的错误现在会生成适当的错误事件，这些事件会触发 window.onerror 处理程序，并作为 "error" 事件分派到 window 对象。

Chromium 问题：1295750

按 Enter 键提交实时表达式

输入完实时表达式后，您可以点击 Enter 来提交。之前，按 Enter 键会导致添加新行。这与其他开发者工具部分不一致。

如需在实时表达式编辑器中添加新行，请改用 Shift + Enter。

Chromium 问题：1260744

在开始时取消用户流录制

您可以在开始录制用户流时取消录制。之前，用户无法取消录制。

Chromium 问题：1257499

在“样式”窗格中显示继承的突出显示伪元素

在样式窗格中查看继承的突出显示伪元素（例如 ::selection、::spelling-error、::grammar-error 和 ::highlight）。之前，这些规则不会显示。

如规范中所述，当多种样式发生冲突时，层叠会决定最终采用哪种样式。这项新功能可帮助您了解规则的继承和优先级。

Chromium 问题：1024156

其他亮点

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

• 属性窗格现在默认显示具有值的访问器属性。之前被错误地隐藏了。(1309087)
• 样式窗格现在可以正确显示被覆盖的 @support 规则（以删除线表示）。之前，规则未添加删除线。(1298025)
• 修复了来源面板中导致在修改 CSS 时出现多行空白行的 CSS 格式设置逻辑。(1309588)
• 将控制台中对象的以递归方式展开选项上限设置为 100，以免循环对象无限展开。(1272450)

[实验性] 复制 CSS 更改

在此实验中，“样式”窗格会以绿色突出显示 CSS 更改。您可以将鼠标悬停在已更改的规则上，然后点击旁边的“复制新规则”按钮进行复制。

除此之外，您还可以通过以下方式将所有 CSS 更改复制到声明中：右键点击任意规则，然后选择复制所有 CSS 更改。

此外，我们还在更改标签页中添加了一个新的复制按钮，以便您轻松跟踪和复制 CSS 更改！

Chromium 问题：1268754

[实验性] 在浏览器外部选择颜色

启用此实验后，您可以使用颜色选择器选择浏览器以外的颜色。以前，您只能在浏览器中选择颜色。

在 Styles 窗格中，点击任意颜色预览以打开颜色选择器。使用取色器从任意位置选择颜色。

Chromium 问题：1245191

下载预览渠道

不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试前沿的 Web 平台 API，并帮助您在用户之前发现网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次点击 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，报告开发者工具问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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