此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

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

使用效果数据分析面板，获取有关网站效果的切实可行且基于用例的数据分析。

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

新的“性能数据分析”面板

记录完成后，您可以在数据分析窗格中获得效果数据分析。点击每个数据分析项（例如，渲染阻塞请求、布局偏移），以了解相应问题及潜在修复方法。

转到性能数据分析面板文档，通过分步教程了解详情。

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

Chromium 问题：1270700

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

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

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

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

Chromium 问题：1314299

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

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

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

默认情况下，浏览器屏蔽了样式表请求。但是，当您通过 Network 面板中的 Preview 标签页打开该页面时，样式表之前并未被屏蔽（因此背景变成了红色）。它现已如您所期望的一样遭到阻止（第二张屏幕截图）。

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

Chromium 问题：833147

改进了在断点处重新加载的功能

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

例如，之前在此 React 演示中设置 ReactDOM 断点并进行重新加载时，脚本会进入无限循环。Sources 面板因无限循环而损坏。

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

改进了在断点处重新加载的功能

Chromium 问题：1014415、1004038、1112863、1134899

Console 更新

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

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

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

Chromium 问题：1295750

使用 Enter 键提交实时表达式

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

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

使用 Enter 键提交实时表达式

Chromium 问题：1260744

在开始时取消用户流记录

您可以在用户流记录开始时取消记录。以前，系统不提供取消录制的选项。

在开始时取消用户流记录

Chromium 问题：1257499

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

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

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

注意：目前，您需要运行带有 --enable-blink-features=HighlightInheritance 标志的 Chrome 才能启用此功能。

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

Chromium 问题：1024156

其他亮点

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

现在，Properties 窗格现在默认显示具有值的访问器属性。之前被错误隐藏了。(1309087)
现在，Styles 窗格可将已替换的 @support 规则正确显示为删除线。以前，规则没有删除线。(1298025)
修复了 Sources 面板中的 CSS 格式逻辑，该问题会导致在修改 CSS 时导致出现多个空白行。(1309588)
在 Console 中，将对象的 Expand recursively 选项的上限设置为 100，以免对于圆形对象一直显示此选项。(1272450)

[实验性] 复制 CSS 更改

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

除此之外，您还可以跨声明复制所有 CSS 更改，方法是右键点击任意规则，然后选择 Copy all CSS changes（复制所有 CSS 更改）。

更改标签页中还新增了复制按钮，可帮助您轻松跟踪和复制 CSS 更改！

复制 CSS 更改

Chromium 问题：1268754

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

启用此实验功能，以便在浏览器中使用颜色选择器选择某种颜色。以前，您只能在浏览器中选择一种颜色。

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

正在选择浏览器以外的颜色

Chromium 问题：1245191

下载预览渠道

您可以考虑将 Chrome Canary 版、Dev 版或 Beta 版用作默认开发浏览器。通过这些预览渠道，您可以使用最新的开发者工具功能，测试先进的网络平台 API，并在用户采取行动之前发现网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变化，或讨论与开发者工具有关的任何其他内容。

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。