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

Google 用户调研。

元素改进

新的 CSS 子网格徽章

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

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

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

Chromium 问题：1442536。

提示中的选择器特异性

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

Chromium 问题：1204932。

提示中的自定义 CSS 属性值

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

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

Chromium 问题：1380779。

来源改进

CSS 语法突出显示

来源面板会针对预处理的 CSS 文件（例如 SASS、SCSS 和 LESS）执行以下操作：

• 语法突出显示。
• 内嵌编辑器支持。这些编辑器与 Elements > Styles 中的编辑器类似，例如颜色选择器和缓动效果编辑器。

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。最值得注意的是，最大内容元素渲染时间检查会获得一个表格，其中包含模拟和开发者工具节流的阶段计算结果。另请参阅完整的变更列表。

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

Chromium 问题：772558。

默认忽略内容脚本

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

启用此设置后：

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

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

Chromium 问题：1440958、1364501。

网络 > 默认启用响应美化打印

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

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

Chromium 问题：1382752、1385374。

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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