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

Sofia Emelianova
Sofia Emelianova
GitHub

Google 用户调研。

寻找彩蛋

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

如需查找，请寻找彩色 💫 表情符号。

“元素”面板更新

此版本对元素面板进行了一些更新。

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

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

如果您将焦点从网页切换到 DevTools，则某些由焦点触发的叠加层元素会自动隐藏。例如，下拉列表、菜单或日期选择器。借助模拟已聚焦的网页选项，您可以调试此类元素，就好像它处于聚焦状态一样。

“样式”标签页中模拟聚焦网页的前后对比。

Chromium 问题：1468393。

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

为了简化 CSS 编辑，元素 > 样式标签页现在允许您在 var() 回退中使用颜色选择器、角度时钟和缓动编辑器。

var() 回退中的渲染前后的颜色选择器、角度时钟和缓动编辑器工具。

Chromium 问题：1520417。

CSS 长度工具已弃用

由于有反馈称 CSS 长度创作工具会减慢工作流程，并且没有增加太多价值，因此该工具已被弃用。

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

如需重新启用长度工具，请依次前往 Settings > Experiments > Deprecate CSS <length> authoring tool in the Styles tab，然后清除相应设置。

如果您仍想使用此工具，DevTools 团队很想听听您的意见，以及长度工具如何在您的工作流程中为您提供帮助。欢迎在 crbug/1522657 中提供反馈。

弃用实验已关闭。

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

为了方便搜索，当您在 Performance > Main 轨迹中的火焰图上循环浏览搜索结果时，系统现在会在相应事件上方显示一个弹出式窗口。

显示所选搜索结果上方的弹出式窗口的前后对比图。

Chromium 问题：1523279。

“网络”面板更新

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

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

网络 > EventStream 标签页会显示：

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

添加“清除”按钮和搜索过滤条件前后的对比图。

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

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

Chromium 问题：1488863、40659493。

“网络”>“Cookie”中包含第三方 Cookie 豁免原因的提示

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

前后对比图：显示了包含第三方 Cookie 豁免原因的工具提示。

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

Chromium 问题：41491846。

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

来源 > 断点部分在其下拉菜单中重新添加了启用和停用所有断点选项。之前，断点重新设计中遗漏了这些选项。

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

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

Chromium 问题：1522037。

在 Node.js 的开发者工具中查看已加载的脚本

Node.js 版开发者工具现在会在来源 > 脚本中的导航树中显示已加载的脚本。

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

Chromium 问题：1518364。

Lighthouse 11.5.0

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

值得注意的更改包括一项新的审核，用于估计布局偏移的根本原因。此审核取代了仅列出受布局偏移影响的元素的 layout-shift-elements 审核。

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

如需了解有关在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

无障碍

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

  • 屏幕阅读器现在会播报：
    • 记录器面板中选择器类型旁边的了解详情链接文本。
    • 当没有实验与 设置 > 实验中的过滤条件相符时。
    • 在 设置 > 快捷方式中移除、确认或恢复快捷方式时的操作确认。
  • 中的表格设置 > 位置信息 现在可以正确呈现为表格，供无障碍工具使用。

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

其他亮点

此版本包含以下值得注意的修复和改进：

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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