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

Sofia Emelianova
Sofia Emelianova
GitHub

元素改进

新的 CSS 子网格标记

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

要检查和调试作为 subgrid 的嵌套网格，从而继承其父级的轨道数量和大小，请点击标志。它可以在视口中切换显示列、行及其编号的叠加层。

视口中的 subgrid 标记和叠加层。

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

Chromium 问题：1442536。

提示中的选择器特异性

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

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

Chromium 问题：1204932。

提示中自定义 CSS 属性的值

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

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

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

Chromium 问题：1380779。

来源方面的改进

CSS 语法突出显示

对于预处理的 CSS 文件（例如 SASS、SCSS 和 LESS），来源面板会显示以下内容：

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

Chromium 问题：1302261、1392085。

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

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

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

Chromium 问题：1405767。

应用 >反弹跟踪缓解措施

通过 Chrome 中的跳出跟踪缓解措施实验，您可以识别和删除似乎在使用跳出跟踪技术执行跨网站跟踪的网站的状态。应用 >后台服务窗格中新增了跳出跟踪缓解措施标签页，可让您手动强制执行跟踪缓解措施并列出状态已被删除的网站。

查看此安全功能：

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

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

此外，问题标签页还会向您发出警告，提醒您系统即将删除状态。

Chromium 问题：1432303。

Lighthouse 10.2.0

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

LCP 阶段表。

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

Chromium 问题：772558。

默认忽略内容脚本

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

启用此设置后：

扩展程序注入的内容脚本默认处于启用状态。依次访问“设置”和“忽略”列表即可找到此问题。

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

Chromium 问题：1440958、1364501。

投放网络 >默认响应美观输出

网络 >响应窗格现在默认显示缩减后的响应正文，类似于来源面板。

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

此外，SVG 文件还具有语法突出显示功能。

SVG 语法突出显示。

Chromium 问题：1382752、1385374。

其他亮点

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

  • 设置。 设置 >设备：在代理字符串列表中添加了 Pixel 6 上搭载 Android v407 的 Facebook。
  • 网络：添加了清除网络日志快捷方式 (1444991)：
    • MacOS：Command + K
    • Windows/Linux：Ctrl + L
  • 移除了 Recorder >录制 N >性能数据分析面板下拉选项 (1414773)。
  • 加载失败的样式表现在已从导航树中隐藏 (1386059)。
  • 效果：修复了展开式互动轨道的不正确显示问题 (1432510)。
  • 元素：未能加载的样式表现在带有波浪线下划线 (1440626)。
  • 如果没有适用于相应语言的插件 (1443342)，Debugger 不会自动执行 WebAssembly。
  • 对于 CSS 文件而言，将光标一次移动一个字词的快捷键在 Sources > 中恢复编辑者 (1241848)：
    • MacOS：Alt + 箭头
    • Windows/Linux：Ctrl + 箭头

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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