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

Sofia Emelianova
Sofia Emelianova

寻找复活节彩蛋

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

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

元素面板更新

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

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

元素 >现在,样式标签页在切换元素状态 (: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 问题:148886340659493

说明“网络”中第三方 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 问题:1516957324282443324467508324930007

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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