Chrome 136 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

改进了“效果”面板

此版本对性能面板进行了一些改进。

新的效果分析数据

效果 > 数据分析标签页新增了以下数据分析：

  • 现代 HTTP：突出显示使用旧版 HTTP/1.1 协议的请求。
  • 使用高效的缓存生命周期：突出显示可受益于更长缓存生命周期的请求，并缩短网站的加载时间。
  • 字体显示，显示优化 font-display 后预计可节省的时间。

“数据分析”标签页中的三项新数据分析。

点击即可突出显示

现在，您可以点击摘要、自下而上、调用树和事件日志表中的项，以便在浏览性能轨迹时，使轨迹中对应的事件保持突出显示，并使其余部分变暗。

“网络请求摘要”中的服务器计时

效果面板中的摘要标签页现在会显示实现了服务器端呈现技术的网络请求的服务器计时。

网络请求摘要中的“服务器计时”表。

性能面板会从 Server-Timing 响应标头标头中获取数据。

在“隐私设置和安全性”中过滤 Cookie

隐私和安全 > 隐私 > 第三方 Cookie 部分中的表格添加了过滤条件，因此您可以更快地找到感兴趣的 Cookie。

“第三方 Cookie”表格中的过滤条件。

各个面板中表格的大小（以 kB 为单位）

为了在同一上下文中保持单位一致，网络和内存面板中的表格以及性能 > 摘要中的 1p / 3p 表格现在会以 kB 为单位显示所有大小。这样一来，您就可以直接比较同一列中和不同面板中的数字，而无需关注 MB、kB 和 B 单位。

统一大小单位之前和之后。

自动完成功能支持“元素”>“样式”中的 corner-shape 和 corner-*-shape

元素 > 样式 中的自动补全功能现在可以为 corner-shape 和 corner-*-shape 属性建议相应的值。

“corner-shape”属性的自动补全选项。

Chromium 问题：402346406。

实验性功能：突出显示 DOM 中元素和属性存在的问题

借助这项新的实验性功能，“元素”面板现在可以使用红色波浪下划线突出显示 DOM 元素或属性存在的问题。将鼠标悬停在这些元素或属性上，即可看到一个工具提示，其中包含指向问题面板中相应错误的链接。

突出显示 DOM 树中存在 DOM 问题的位置，并显示工具提示和指向“问题”面板的链接。

元素面板目前会突出显示 <select> 的无效后代、不匹配的 ARIA 定义和无效的 ARIA 属性。

Chromium 问题：378738916。

Lighthouse 12.5.0

Lighthouse 面板现在运行的是 Lighthouse 12.5.0。

在此版本中，最值得注意的是，legacy-javascript 现在使用 Baseline 而不是 esmodules。请参阅完整的变更列表。

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

Chromium 问题：40543651。

其他亮点

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

  • 性能 > 分析 > 网络依赖树：现在会在网络树中显示所有网络请求的时间 (400708304)。
    • 网络依赖关系树：现在会在网络树中显示所有网络请求的时间 (400708304)。
  • 动画：修复了因捕获的动画而导致分离的元素出现在内存面板中的 bug 400635410。
  • 录制器：现在，首次运行录制功能时，会使用与粘贴代码时相同的确认对话框。
  • 图层：现在会在底部的状态栏中显示图层总数和所有可见图层的总内存。
  • 内存：通过在两个工作器之间并行处理任务（而不是使用一个工作器），提升了堆快照初始化速度 (42203857)。
  • 问题：现在会报告本地网络访问 (LNA) CORS 错误 (395895368)。
  • 无障碍功能：
    • 提示：现在会在按下快捷键时显示，而不是在获得焦点时显示 (396311936)。
    • 元素 > 样式：现在可以使用键盘与 var() 函数进行互动，这意味着您可以选择 --custom-property 并按 Enter 键前往其链接目标 (401212692)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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