此页面由 Cloud Translation API 翻译。

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

Sofia Emelianova

寻找复活节彩蛋

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

只要找一个色彩鲜艳的 😅? 表情符号，就可以找到它。

元素面板更新

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

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

现在，元素 > 样式标签页的切换元素状态 (:hov) 按钮下具有check_box 模拟聚焦的网页选项。以前，您只能在呈现面板中找到此选项。

如果将焦点从页面切换到开发者工具，某些叠加层元素会在由焦点触发时自动隐藏。例如，下拉列表、菜单或日期选择器。借助模拟聚焦的网页选项，您可以调试此类元素，就好像其处于焦点位置一样。

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

Chromium 问题：1468393。

`var()` 后备中的颜色选择器、角度时钟和加/减速编辑器

为了简化 CSS 编辑，现在您可以在元素 > 样式标签页中使用 var() 后备中的颜色选择器、角时钟和加/减速编辑器。

在 var() 回退中渲染颜色选择器、角度时钟和加/减速编辑器工具之前和之后。

Chromium 问题：1520417。

CSS 长度工具已弃用

您好！CSS 长度制作工具已被弃用，因为用户反馈说该工具会拖慢工作流程并且没有增加太多价值。

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

要重新启用长度工具，请依次清除设置设置 > 实验 > check_box 在“样式”标签页中弃用 CSS <length> 制作工具。

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

弃用实验已关闭。

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

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

Chromium 问题：1523279。

“网络”面板更新

此版本对网络面板进行了几项更新。

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

网络 > EventStream 标签页会获取以下内容：

屏蔽清除按钮，用于清除表格中捕获的事件。
可理解正则表达式的搜索过滤器。

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

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

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

Chromium 问题：1488863、40659493。

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

现在，网络 > Cookie 标签页会在本应因第三方 Cookie 逐步淘汰计划而被屏蔽的 Cookie 旁显示提示，说明豁免原因。

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

允许使用第三方 Cookie 的可能原因如下：

Chrome 企业版政策
Storage Access API 或顶级 Storage Access API
第三方 Cookie 逐步弃用试用或其宽限期
第三方 Cookie 逐步淘汰启发法
用户首选项

Chromium 问题：41491846。

在 Sources 中启用和停用所有断点

Sources > Breakpoints 部分会在其下拉菜单中恢复 Enable 和 Disable all points 选项。以前，断点重新设计会忽略这些选项。

若要启用或停用所有断点，请右键点击 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 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

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

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