开发者工具中的新功能 (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 > 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 阶段表。

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

Chromium 问题：772558。

默认忽略内容脚本

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

启用此设置后：

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

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

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 > Performance Insights 面板下拉选项 (1414773)。
  • 加载失败的样式表现在已从导航树中隐藏 (1386059)。
  • 效果：修复了展开式互动轨道的不正确显示问题 (1432510)。
  • 元素：未能加载的样式表现在带有波浪线下划线 (1440626)。
  • 如果没有适用于相应语言的插件 (1443342)，Debugger 不会自动执行 WebAssembly。
  • 对于 CSS 文件，系统会于 Sources > Editor (1241848) 中一次移动光标一个字词的快捷键：
    • MacOS：Alt + 箭头
    • Windows/Linux：Ctrl + 箭头

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 浏览器 111

Chrome 浏览器 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 入门指南

Chrome 浏览器 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消。

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59