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

Sofia Emelianova
Sofia Emelianova
GitHub

寻找彩蛋

为了庆祝今年的愚人节，开发者工具团队在开发者工具的某个位置藏了一个彩蛋。

如需找到它，请查找彩色的 💫? 表情符号。

“元素”面板更新

此版本对元素面板进行了多项更新。

在“元素”>“样式”中模拟已聚焦的网页

元素 > 样式标签页现在在切换元素状态 (:hov) 按钮下方添加了 模拟聚焦页面选项。以前，您只能在渲染面板中找到此选项。

如果您将焦点从网页切换到 DevTools，某些叠加层元素会自动隐藏，前提是这些元素是通过焦点触发的。例如，下拉列表、菜单或日期选择器。借助模拟已聚焦的网页选项，您可以像对聚焦元素进行调试一样对此类元素进行调试。

在“样式”标签页中模拟所聚焦的网页之前和之后。

Chromium 问题：1468393。

var() 回退中的颜色选择器、角度时钟和缓动编辑器

为简化 CSS 编辑，您现在可以在 var() 回退中使用 Elements > Styles 标签页中的Color Picker、Angle Clock 和 Easing Editor。

在 var() 回退中呈现颜色选择器、角度时钟和缓动编辑器工具之前和之后。

Chromium 问题：1520417。

CSS 长度工具已废弃

由于有反馈指出 CSS 长度创作工具会拖慢工作流程且没有太大价值，因此该工具已废弃。

您无法再拖动来调整值，也无法从下拉菜单中选择单位类型。请改为双击该值，然后输入新值。

如需重新启用长度工具，请依次前往 Settings > Experiments > 在“Styles”标签页中弃用 CSS <length> 创作工具，然后清除该复选框。

如果您仍想使用此工具，开发者工具团队希望听取您的意见，了解长度工具如何帮助您提高工作效率。欢迎随时在 crbug/1522657 中提供反馈。

弃用实验已停用。

“效果”>“主轨道”中所选搜索结果的弹出式窗口

为了简化搜索操作，当您在效果 > 主要轨道中轮替浏览搜索结果时，火焰图现在会在相应事件上方显示一个弹出式窗口。

在所选搜索结果上方显示弹出式窗口之前和之后。

Chromium 问题：1523279。

“网络”面板更新

此版本对网络面板进行了一些更新。

“网络”>“EventStream”标签页中的“清除”按钮和搜索过滤条件

网络 > EventStream 标签页会获取：

  • 一个 Clear 按钮，用于清除表格中捕获的事件。
  • 一种可理解正则表达式的搜索过滤条件。

添加“清除”按钮和搜索过滤条件之前和之后。

开发者工具团队感谢 Charles Vazac 实现此功能。

此外，EventStream 标签页现在还会捕获服务器通过 fetch/XHR 发送的事件，而不仅仅是 EventSource API。您可以在此演示页上试用此功能。

Chromium 问题：1488863、40659493。

在“广告网络”>“Cookie”中，显示了第三方 Cookie 豁免原因的提示

广告网络 > Cookie 标签页现在会在应被第三方 Cookie 逐步淘汰机制屏蔽的 Cookie 旁边显示包含豁免原因的提示。

显示第三方 Cookie 豁免原因的提示的之前和之后。

第三方 Cookie 可能会因以下原因而被允许：

Chromium 问题：41491846。

在“Sources”（来源）中启用和停用所有断点

Sources（来源）> Breakpoints（断点）部分将启用和停用所有断点选项重新添加到其下拉菜单中。以前，断点重新设计会忽略这些选项。

如需启用或停用所有断点，请依次点击 Sources > Breakpoints，然后右键点击某个断点并选择相应选项。

恢复启用和停用选项之前和之后。

Chromium 问题：1522037。

在 Node.js 的 DevTools 中查看已加载的脚本

Node.js 的 DevTools 现在会在 Sources（来源）> Scripts（脚本）的导航树中显示已加载的脚本。

添加“脚本”标签页（其中包含已加载脚本的树状结构）之前和之后。

Chromium 问题：1518364。

Lighthouse 11.5.0

Lighthouse 面板现在运行的是 Lighthouse 11.5.0。请参阅完整的变更列表。

值得注意的变化之一是，新增了一项审核，用于估算布局偏移的根本原因。此审核取代了仅列出受布局偏移影响的元素的 layout-shift-elements 审核。

一项新的审核，用于估算布局偏移的根本原因。

如需了解如何在 DevTools 中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

无障碍

此版本在无障碍功能方面进行了以下改进：

  • 屏幕阅读器现在会读出以下内容：
    • 录制器面板中选择器类型旁边的了解详情链接文本。
    • 在 设置 > 实验中，没有符合过滤条件的实验。
    • 在 设置 > 快捷方式中移除、确认或恢复快捷方式时的操作确认。
  • 设置 > 位置 中的表格现在会正确呈现为无障碍工具表格。

Chromium 问题：1516957、324282443、324467508、324930007。

其他亮点

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

  • 更新了 DevTools 中的字体，使其与 Chrome 保持一致 (1523538)。
  • 性能：修复了将鼠标悬停在时间轴上时屏幕截图显示的问题 (1519469)。
  • 来源：提高了编辑器中的行高，以提高代码可读性 (1523640)。
  • 网络 > 响应：修复了不同格式和编码的各种显示问题 (1523128、1509336、1523128、41481944、1509336)。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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