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

Sofia Emelianova
Sofia Emelianova
GitHub

寻找复活节彩蛋

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

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

元素面板更新

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

在“元素”中模拟聚焦的网页 >风格

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

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

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

Chromium 问题：1468393。

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

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

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

Chromium 问题：1520417。

CSS 长度工具已弃用

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

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

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

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

弃用实验已关闭。

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

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

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

Chromium 问题：1523279。

“网络”面板更新

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

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

网络 >EventStream 标签页会获取以下信息：

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

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

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

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

Chromium 问题：1488863、40659493。

说明“网络”中第三方 Cookie 的豁免原因的提示 >饼干

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

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

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

Chromium 问题：41491846。

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

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

要启用或停用所有断点，请右键点击 Sources 中的断点，断点，然后选择相应的选项。

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

Chromium 问题：1522037。

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

Node.js 版开发者工具在 Sources 的导航树中显示加载的脚本 >脚本。

添加“脚本”标签页之前和之后，该标签页包含已加载的脚本树。

Chromium 问题：1518364。

Lighthouse 11.5.0

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

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

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

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

Chromium 问题：772558。

无障碍

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

  • 屏幕阅读器现在会读出以下内容： <ph type="x-smartling-placeholder">
      </ph>
    • 录音机面板中选择器类型旁边的了解详情链接文本。
    • 如果没有任何实验与设置中的设置中的过滤条件匹配，请执行以下操作：实验。
    • 在设置 设置中移除、确认或恢复快捷方式时的操作确认 >快捷方式。
  • 设置 设置 > 中的表格营业地点现在可以正确地以表格的形式呈现，供无障碍工具使用。

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

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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