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

Sofia Emelianova
Sofia Emelianova
GitHub

Google 用户调研。

Elements 改进

新的 CSS 子网格徽章

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

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

子网格徽章和视口中的叠加层。

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

Chromium 问题：1442536。

提示中的选择器特异性

在元素 > 样式中，将光标悬停在选择器名称上，即可在工具提示中看到其特异性权重。

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

Chromium 问题：1204932。

提示中的自定义 CSS 属性值

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

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

DevTools 团队衷心感谢一丝和 Suyan 实现了这项改进。

Chromium 问题：1380779。

来源方面的改进

CSS 语法突出显示

对于 SASS、SCSS 和 LESS 等预处理 CSS 文件，“来源”面板会显示以下内容：

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

Chromium 问题：1302261、1392085。

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

您现在可以使用快捷方式更快地设置条件断点。如需打开断点对话框，请按住 Command 键 (MacOS) 或 Control 键 (Windows / Linux)，然后点击来源 > 编辑器左侧列中的行号。

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

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 阶段表。

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

Chromium 问题：772558。

默认忽略内容脚本

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

启用此设置后：

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

默认情况下，由扩展程序注入的内容脚本处于启用状态。您可以在“设置”中找到“忽略列表”。

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

Chromium 问题：1440958、1364501。

网络 > 默认情况下对响应进行美化打印

网络 > 响应窗格现在默认以美观格式显示精简的响应正文，类似于“来源”面板。

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

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

SVG 语法突出显示。

Chromium 问题：1382752、1385374。

其他亮点

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

  • 设置。 设置 > 设备：在代理字符串列表中添加了 Pixel 6 上的 Facebook for Android v407。
  • 网络：添加了清除网络日志快捷方式 (1444991)：
    • macOS：Command + K
    • Windows/Linux：Control + L
  • 移除了记录器 > 记录 N > 性能分析面板下拉选项 (1414773)。
  • 现在，加载失败的样式表会从导航器树中隐藏 (1386059)。
  • 效果：修复了可展开的互动轨道显示不正确的问题 (1432510)。
  • 元素：无法加载的样式表现在会以波浪线突出显示（1440626）。
  • 当没有相应语言的插件时，Debugger不会自动进入 WebAssembly (1443342)。
  • 在来源 > 编辑器 (1241848) 中，针对 CSS 文件恢复了每次移动一个字词的光标快捷键：
    • macOS：Alt + 箭头
    • Windows/Linux：Ctrl + 箭头

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

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