此页面由 Cloud Translation API 翻译。

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

Sofia Emelianova

寻找复活节彩蛋

为了庆祝今年的愚人节，开发者工具团队在开发者工具的某个地方隐藏了一颗复活节彩蛋。

要想找到它，请寻找色彩缤纷的 💫? 表情符号。

元素面板更新

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

依次前往“元素”>“样式”模拟聚焦的页面

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

如果您将焦点从页面切换到开发者工具，某些叠加层元素在焦点触发时会自动隐藏。例如，下拉列表、菜单或日期选择器。借助模拟聚焦的页面选项，您可以对此类元素进行调试，使其获得焦点。

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

Chromium 问题：1468393。

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

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

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

Chromium 问题：1520417。

CSS 长度工具已弃用

根据反馈，该工具会拖慢工作流程，而且没有增加多少价值，因此 CSS 长度制作工具已被弃用。

您无法再通过拖动来调整值或从下拉菜单中选择单位类型。您应双击该值并输入新值。

要重新启用长度工具，请依次清除设置设置 > 实验 > 复选框 “样式”标签页中的“停用 CSS <length> 创作工具”。

如果您仍想使用此工具，开发者工具团队很想听听您的意见，并了解长度工具对您的工作流程有何帮助。欢迎在 crbug/1522657 中提供反馈。

弃用实验已关闭。

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

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

Chromium 问题：1523279。

网络面板更新

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

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

网络 > EventStream 标签页包含以下内容：

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

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

开发者工具团队衷心感谢 Charles Vazac 为开发者推出此功能。

此外，EventStream 标签页现在还会捕获服务器通过 fetch/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 > Breakpoints 中右键点击某个断点，然后选择相应的选项。

Chromium 问题：1522037。

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

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

添加“脚本”标签页前后的对比图，其中列出了已加载的脚本树。

Chromium 问题：1518364。

Lighthouse 11.5.0

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

其中一项值得注意的更改是新增了一项评估，旨在评估布局偏移的根本原因。这项评估已取代“布局偏移元素”评估，后者仅列出受布局偏移影响的元素。

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

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

Chromium 问题：772558。

无障碍功能

此版本有以下无障碍功能改进：

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

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

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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