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

Jecelyn Yeen

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

使用“效果数据分析”面板，获取有关网站性能的可作为行动依据和用例的数据分析。

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

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

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

前往效果数据分析面板文档，通过分步教程了解详情。

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

Chromium 问题：1270700

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

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

以前，在“呈现”标签页中模拟主题需要执行更多步骤。

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

Chromium 问题：1314299

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

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

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

默认情况下，浏览器屏蔽了样式表请求。不过，当您通过网络面板中的预览标签页打开该网页时，样式表之前没有被屏蔽（因此背景变成红色）。它现已像您预期的那样被屏蔽（第二个屏幕截图）。

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

Chromium 问题：833147

改进了断点处的重新加载

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

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

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

改进了断点处的重新加载

Chromium 问题：1014415、1004038、1112863、1134899

Console 更新

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

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

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

Chromium 问题：1295750

按 Enter 键提交实时表达式

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

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

按 Enter 键提交实时表达式

Chromium 问题：1260744

从开始时取消用户流录制

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

从开始时取消用户流录制

Chromium 问题：1257499

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

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

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

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

Chromium 问题：1024156

其他亮点

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

  • 属性窗格现在会默认显示具有值的访问器属性。该文件之前被错误地隐藏了。(1309087)
  • 现在，Styles 窗格会以删除线正确显示被替换的 @support 规则。以前，相关规则没有添加删除线。(1298025)
  • 修复了在修改 CSS 时会导致多行空白行的 Sources 面板中的 CSS 格式设置逻辑。(1309588)
  • 在控制台中，将对象的以递归方式展开选项的上限设置为 100，以免其永远针对圆形对象显示。(1272450)

[实验性] 复制 CSS 更改

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

除此之外，您还可以右键点击任意规则并选择复制所有 CSS 更改，从而跨声明复制所有 CSS 更改。

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

复制 CSS 更改

Chromium 问题：1268754

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

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

在 Styles（样式）窗格中，点击任意颜色预览以打开颜色选择器。使用取色器挑选任意位置的颜色。

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

Chromium 问题：1245191

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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