开发者工具中的新功能 (Chrome 115)

Sofia Emelianova
Sofia Emelianova
GitHub

元素改进

新的 CSS 子网格徽章

元素面板针对 subgrid 显示了新的 subgrid 标记。此功能目前在 Chrome Canary 中处于实验阶段。

如需检查和调试嵌套的网格（即子网格，因此会从其父级沿用轨道的数量和大小），请点击该标记。它会切换一个叠加层，在视口中元素的顶部显示列、行及其编号。

视口中的子网格标记和叠加层。

如需查看元素面板中所有徽章的列表，请参阅徽章参考文档。

Chromium 问题：1442536。

提示中的选择器特异性

在 Elements（元素）> Styles（样式）中，将光标悬停在选择器名称上，即可在提示中查看其特异性权重。

显示选择器特异性权重的提示。

Chromium 问题：1204932。

工具提示中自定义 CSS 属性的值

在元素 > 样式中，将光标悬停在自定义 CSS 属性名称上，即可在提示中查看其值。

包含自定义 CSS 属性值的提示。

开发者工具团队衷心感谢 一丝和 Suyan 完成这项改进。

Chromium 问题：1380779。

来源改进

CSS 语法突出显示

来源面板会为预处理的 CSS 文件（例如 SASS、SCSS 和 LESS）获取以下信息：

  • 语法突出显示。
  • 内嵌编辑器支持。这些编辑器与 Elements（元素）> Styles（样式）中的编辑器类似，例如Color Picker（颜色选择器）和 Easing Editor（缓动编辑器）。

改进了“Sources”中的 CSS 语法突出显示和内嵌编辑器支持。

Chromium 问题：1302261、1392085。

用于设置条件断点的快捷方式

现在，您可以使用快捷方式更快地设置条件断点。如需打开断点对话框，请按住 Command（macOS）或 Control（Windows / Linux），然后点击 Sources > Editor 左侧列中的行号。

左侧列和断点对话框中的行号。

Chromium 问题：1405767。

应用 > 跳出跟踪缓解措施

借助 Chrome 中的跳出跟踪缓解措施实验，您可以识别并删除似乎使用跳出跟踪技术进行跨网站跟踪的网站的状态。应用 > 后台服务窗格中会显示一个新的跳出率跟踪缓解措施标签页，您可以通过该标签页手动强制执行跟踪缓解措施，并列出状态已被删除的网站。

请查看以下安全功能：

  1. 在 Chrome 中阻止第三方 Cookie。依次前往 三点状菜单。 > 设置 > 安全性。 隐私和安全 > Cookie 及其他网站数据 > 单选按钮已选中。 阻止第三方 Cookie，然后将其开启。
  2. 在 chrome://flags 中，将反弹跟踪缓解措施实验设置为启用并删除。
  3. 检查此演示页面，依次打开应用 > 后台服务 > 跳出率跟踪缓解措施，点击页面上的跳出链接，等待（10 秒）Chrome 记录跳出情况，然后点击强制运行以立即删除该状态。

“跳出跟踪缓解措施”列出了状态删除。

此外，问题标签页会提醒您即将删除状态。

Chromium 问题：1432303。

Lighthouse 10.2.0

Lighthouse 面板现在运行的是 Lighthouse 10.2.0。最值得注意的是，Largest Contentful Paint 检查会获取一个表格，其中包含模拟和开发者工具节流的阶段计算。另请参阅完整的变更列表。

LCP 阶段表。

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

Chromium 问题：772558。

默认忽略内容脚本

设置。 设置 > 忽略列表 > 复选框。 由扩展程序注入的内容脚本现在默认处于启用状态。

启用此设置后：

  • 调试程序会忽略此类脚本，且不会在遇到脚本抛出的异常时停止。
  • 来源 > 调用堆栈窗格会跳过被忽略的帧。如需在此处关闭跳过功能，请选中 复选框。 显示已列入忽略列表的帧。
  • 控制台会收起堆栈轨迹中被忽略的帧。点击展开并显示 N 个更多帧可展开，点击收起可再次收起。

默认情况下，由扩展程序注入的内容脚本处于启用状态。如需查找此设置，请依次前往“设置”和“忽略列表”。

此外，忽略列表中的复选框文字更清晰。

Chromium 问题：1440958、1364501。

网络 > 默认对响应进行美化输出

现在，默认情况下，网络 > 响应窗格会以美化格式显示经过缩减的响应正文，与来源面板类似。

在“网络”标签页的“响应”窗口中启用了美化输出。

此外，SVG 文件还会显示语法突出显示。

SVG 语法突出显示。

Chromium 问题：1382752、1385374。

其他亮点

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

  • 设置。 设置 > 设备：将 Pixel 6 上的 Facebook for Android v407 添加到了代理字符串列表中。
  • 网络：添加了清除网络日志快捷方式 (1444991)：
    • MacOS：Command + K
    • Windows/Linux：Ctrl + L
  • 移除了 Recorder（录制器）> Recording N（录制 N）> Performance insights panel（效果分析面板）下拉菜单选项 (1414773)。
  • 未能加载的样式表现在会从导航器树中隐藏 (1386059)。
  • 效果：修复了可展开的互动轨道的显示错误 (1432510)。
  • 元素：现在，加载失败的样式表会用波浪线标记下划线 (1440626)。
  • 当没有相应语言的插件时，调试程序不会在 WebAssembly 中自动单步调试 (1443342)。
  • 为 CSS 文件恢复了 Sources（来源）> Editor（编辑器）中的光标一次移动一个字的快捷键 (1241848)：
    • macOS：Alt + 箭头
    • Windows/Linux：Ctrl + 箭头

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。