Chrome 136 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

改进了效果面板

此版本对性能面板进行了多项改进。

新的效果数据分析

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

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

“洞察”标签页中新增了 3 项数据分析。

点击即可突出显示

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

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

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

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

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

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

隐私和安全 > 隐私 > 第三方 Cookie 部分中的表格会显示一个过滤器，以便您更快地找到感兴趣的 Cookie。

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

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

为了在同一上下文中保持单位一致，网络和内存面板中的表格，以及性能 > 摘要中的第一方 / 第三方表格现在都以 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 现在使用的是基准，而不是 esmodules。请参阅完整的变更列表。

如需了解如何在 DevTools 中使用 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 开发者工具团队联系

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

开发者工具的新变化

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