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

Sofia Emelianova
Sofia Emelianova

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

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

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

Chromium 问题:147110214711031471105

更多本地替换项改进

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

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

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

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

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

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

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

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

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

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

Chromium 问题:14729521416338147258014736811475668

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

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

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

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

Chromium 问题:14688751472019

改进的“Sources”面板

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

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

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

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

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

Chromium 问题:14737711473880147396314746861474687

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

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

Chromium 问题:1473758

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

来源面板现在可以:

  • 在以下脚本类型中美观输出的内嵌 JavaScript:moduleimportmapspeculationrules
  • 突出显示 importmapspeculationrules 脚本类型(二者都包含 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 问题:1470401147130114741081468631

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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