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

Sofia Emelianova
Sofia Emelianova
GitHub

改进了元素

新增 CSS subgrid 徽章

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

要检查和调试作为子网格的嵌套网格，以便从其父项继承轨迹的数量和大小，请点击标志。它会切换叠加层，以显示视口中元素顶部的列、行及其编号。

视口中的 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 记录跳出，然后点击强制运行以立即删除相应状态。

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

此外，Issues 标签页也会针对即将发生的状态删除发出警告。

Chromium 问题：1432303。

Lighthouse 10.2.0

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

LCP 阶段表。

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

Chromium 问题：772558。

默认忽略内容脚本

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

启用此设置后：

  • Debugger 会忽略此类脚本，并且不会在遇到它们抛出的异常时停止。
  • Sources > Call Stack 窗格会跳过忽略的帧。如需在此处关闭跳过功能，请勾选 复选框。 显示已列入忽略名单的帧。
  • 控制台会收起堆栈轨迹中忽略的帧。点击显示另外 N 帧可展开，点击收起可再次收起。

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

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

Chromium 问题：1440958、1364501。

网络 > 响应美观输出默认

现在，默认情况下，Network > Response 窗格会美观输出缩减的响应正文，类似于 Sources 面板。

在“Network”标签页的“Response”窗口中启用了美观输出功能。

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

SVG 语法突出显示。

Chromium 问题：1382752、1385374。

其他亮点

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

  • 设置。 设置 > 设备：向代理字符串列表中添加了 Facebook for Android v407 on Pixel 6。
  • 网络：添加了清除网络日志快捷方式 (1444991)：
    • MacOS：Command + K
    • Windows/Linux：Ctrl + L
  • 移除了 Recorder > Recording N > Performance Insights 面板下拉选项 (1414773)。
  • 加载失败的样式表现在会在导航器树中隐藏 (1386059)。
  • 效果：修复了展开式互动轨道的错误显示问题 (1432510)。
  • 元素：现在，加载失败的样式表会以波浪线下划线标注 (1440626)。
  • 如果相应语言的插件没有对应的插件，Debugger 不会自动单步进入 WebAssembly (1443342)。
  • 对于 CSS 文件，可以在 Sources > Editor 中恢复一次将光标移动一个字词的快捷键 (1241848)：
    • MacOS：Alt + 箭头键
    • Windows/Linux：Ctrl + 箭头键

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文：@ChromeDevTools。
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

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 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

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