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

Jecelyn Yeen

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

使用效果分析面板，根据应用场景获取有关网站性能的富有实用价值的分析洞见。

打开该面板，然后根据您的用例开始新录制。例如，我们来衡量此演示页的网页加载时间。

新增了“性能数据分析”面板

录制完成后，您会在数据分析窗格中看到效果数据分析。点击每个数据分析项（例如“呈现阻塞请求”“布局偏移”），了解问题和可能的解决方法。

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

这项功能目前处于预览阶段，可帮助 Web 开发者（尤其是非性能专家）识别和解决潜在的性能问题。我们的团队正在努力完善此功能，期待您的反馈，以便进一步改进。

Chromium 问题：1270700

新增了用于模拟浅色和深色主题的快捷键

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

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

新增了用于模拟浅色和深色主题的快捷键

Chromium 问题：1314299

提高了“网络预览”标签页的安全性

现在，DevTools 会在网络面板的预览标签页中应用内容安全政策 (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。

使用 Enter 键提交实时表达式

Chromium 问题：1260744

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

您可以在用户体验历程录制开始时取消录制。以前，没有取消录制的选项。

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

Chromium 问题：1257499

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

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

如规范中所述，当多个样式发生冲突时，级联会确定胜出的样式。这项新功能可帮助您了解规则的继承和优先级。

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

Chromium 问题：1024156

其他亮点

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

  • Properties 窗格现在默认会显示带有值的访问器属性。它之前是被误隐藏的。(1309087)
  • 样式窗格现在会正确地将被替换的 @support 规则显示为删除线。之前，规则不会带删除线。(1298025)
  • 修复了 Sources 面板中的 CSS 格式设置逻辑，该逻辑会导致在编辑 CSS 时出现多个空行。(1309588)
  • 将控制台中对象的递归展开选项的数量上限设为 100，以免循环对象的展开操作无限期进行。(1272450)

[实验性] 复制 CSS 更改

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

此外，您还可以右键点击任意规则，然后选择复制所有 CSS 更改，以复制声明中的所有 CSS 更改。

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

复制 CSS 更改

Chromium 问题：1268754

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

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

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

在浏览器之外选择颜色

Chromium 问题：1245191

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。