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

Sofia Emelianova
Sofia Emelianova
GitHub

“元素 >”中有关自定义属性的新部分风格

元素面板现在支持 @property CSS at-rule。借助该类，您可以明确定义 CSS 自定义属性，并在样式表中注册这些属性，而无需运行任何 JavaScript。

要检查已注册的自定义属性，请在元素 >样式中，将鼠标悬停在属性名称上，即可在提示中查看其描述符。在提示中，点击链接以在可收起的 @property 部分中查看已注册的属性。

Chromium 问题：1471102、1471103、1471105。

更多本地替换项改进

本地替换设置延续了上一版本中的一系列改进，现在可执行以下操作：

  • 在来源 >Page 中，当您右键点击源代码映射文件并选择 Override content 时，DevTools 会显示一个对话框，将您转到原始源代码。源代码映射文件的内容无法替换。

    此对话框会将您转到原始代码（而非源代码映射文件）。

  • 网络面板会获得一个新的包含替换值列和相应的 has-overrides:[content|headers|yes|no] 过滤条件。要查看包含替换值列，请右键点击表格标题，并将其选中。

    过滤“has-overrides:yes”值列。

  • 在来源 >替换项中，删除所有替换项菜单选项已替换为删除选项，这些选项具有精确的行为。

    替换“删除所有替换项”之前和之后点击“删除”即可

之前的删除所有替换项令人困惑，因为它只删除了当前会话中有效的替换项（标有 已保存。 紫点图标）。

新的删除选项会先显示警告消息并提示确认，然后会删除您点击的文件夹及其所有内容。

如需恢复上一个选项，请选中 设置。 设置中的 复选框。 启用“暂时删除所有替换项” >实验。

Chromium 问题：1472952、1416338、1472580、1473681、1475668。

现在，Search 结果会根据它在一行代码中找到的所有匹配项显示一个条目。以前，每行仅显示第一个匹配项。当您在缩小的文件中搜索时，此新行为特别有用。现在，当您点击某条搜索结果时，系统会在编辑器中打开相应文件，而且现在不仅会在垂直方向上水平和水平滚动匹配项，也会将其滚动到视图中。

执行搜索操作前后的各行会显示所有匹配项。

此外，Google 搜索的速度也得到了提升。请在下一个视频中对比查看之前（左侧）和之后（右侧）的对比。

最后，搜索现在支持忽略列表，并且不会显示来自忽略文件的结果。

Chromium 问题：1468875、1472019。

改进的“Sources”面板

“Sources”面板中的简化工作区

Sources 面板中的工作区功能经过了全新简化：

  • 一致的命名方式。最值得注意的是，来源 >文件系统窗格已重命名为工作区。此窗格中的各种界面文本现在更清晰，且没有冗余。
  • 改进了设置。查看更清晰的拖放文件夹提示，或点击链接选择文件夹。

来源 >借助工作区，您可以将在开发者工具中所做的更改直接同步到源文件。

查看新设置和工作流程的实际应用：

Chromium 问题：1473771、1473880、1473963、1474686、1474687。

对“来源”中的窗格进行重新排序

现在，您可以通过拖放操作来对 Sources 面板左侧的窗格重新排序，这与对其他面板、标签页和窗格重新排序类似。

Chromium 问题：1473758。

适用于更多脚本类型的语法突出显示和美观输出

来源面板现在可以：

  • 在以下脚本类型中美观输出的内嵌 JavaScript：module、importmap、speculationrules。
  • 突出显示 importmap 和 speculationrules 脚本类型（二者都包含 JSON）的语法。

美观输出和推测规则脚本类型的语法突出显示前后。

要详细了解推测规则，请参阅在 Chrome 中预渲染网页以实现即时网页导航。

Chromium 问题：1473875。

模拟 Preferreds-reduced-transparency 媒体功能

Chrome 118 现在支持 prefers-reduced-transparency 媒体功能。借助此功能，开发者可以根据用户选择的偏好设置调整 Web 内容，以降低操作系统中的透明度，例如 macOS 上的降低透明度设置。

如需模拟此媒体功能，请打开 Rendering 标签页，然后向下滚动到该标签页。

Chromium 问题：1424879。

11 号灯塔

Lighthouse 面板现在会运行 Lighthouse 11。最值得注意的是，此版本移除了旧版导航，添加了新的无障碍功能审核，并更改了无障碍功能类别的评分方式。

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

Chromium 问题：772558。

改进了无障碍功能

开发者工具现在支持更多导航按键：

  • CSS Overview：使用向上和向下箭头浏览左侧边栏中的各个部分。
  • 内存：在左侧边栏中，使用 Tab 键将焦点移至快照旁边的保存按钮，然后按 Enter 键选择文件夹。

此外，我们还修复了几个屏幕阅读器通知问题。

Chromium 问题：1470401、1471301、1474108、1468631。

其他亮点

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

  • 网络：新图标，表示热门资源类型：media、wasm、websocket、manifest、fetch/xhr、json (1466298)。
  • 在许多界面元素中，我们更新了 Material 3 颜色的颜色，尤其是在元素和性能面板中（1456690、1472243）。
  • 问题现在会在导航过程中保留 Cookie 问题 (1466601)。
  • 各种应用 >预加载方面的改进，最值得注意的方面是可排序的网格，并修订了规则集详细信息 (1410709)。
  • 对协议监控中的命令编辑器进行了多项改进，其中包括针对输入错误的警告、修改已发送的命令、支持不含预定义键的对象参数编辑器、支持由引用未定义的枚举、没有类型引用的对象、按子字符串匹配项过滤命令等 (1448050)。
  • 效果火焰图会在饼图中的总框周围显示边框 (1470147)。
  • 来源现在不会将短划线视为 CSS 中的文字字符 (1471354)。
  • 现在，自动补全功能始终会对适合 CSS 的关键字进行排序。
  • 正则表达式过滤条件现在支持空格 (1346936)。
  • Elements 解决了媒体查询功能检测问题 (1472693)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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