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

Sofia Emelianova
Sofia Emelianova

在“元素”>“样式”中新增了自定义属性部分

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

如需检查已注册的自定义属性,请依次选择 Elements(元素)> Styles(样式),然后将光标悬停在相应属性名称上,即可在提示中查看其描述符。在提示中,点击链接可在可收起的 @property 部分中查看已注册的媒体资源。

Chromium 问题:147110214711031471105

更多本地替换项改进

上一个版本中的一系列改进之后,本地替换项现在可以执行以下操作:

  • Sources(来源)> Page(网页)中,如果您右键点击已映射源文件并选择 Override content(替换内容),则开发者工具会显示一个对话框,将您定向到原始来源。源代码映射文件的内容无法替换。

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

  • 网络面板会显示一个新的有替换项列和相应的 has-overrides:[content|headers|yes|no] 过滤条件。如需查看是否有替换项列,请右键点击表格标题,然后选择该标题。

    在“是否有替换项”列中过滤出“has-overrides:yes”值。

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

    将“Delete all overrides”(删除所有替换项)替换为“Delete”(删除)之前和之后。

之前的删除所有替换项功能令人困惑,因为它只会删除当前会话中处于有效状态的替换项(用 已保存。 紫色圆点图标标记)。

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

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

Chromium 问题:14729521416338147258014736811475668

搜索结果现在会针对代码行中找到的所有匹配项显示一条条目。以前,它仅显示每行代码中的第一个匹配项。当您搜索经过缩减的文件时,新行为尤其有用。点击搜索结果后,系统会在编辑器中打开相应文件,并且现在不仅可以垂直滚动匹配项,还可以水平滚动匹配项。

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

此外,Google 搜索的速度也得到了提升。请观看下一个视频,了解更改前(左)与更改后(右)的对比效果。

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

Chromium 问题:14688751472019

改进的“Sources”面板

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

来源面板中的工作区功能经过了简化:

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

通过 Sources > Workspace,您可以将在 DevTools 中进行的更改直接同步到源文件。

查看新设置和工作流的实际运作方式:

Chromium 问题:14737711473880147396314746861474687

在“来源”中重新排列窗格

现在,您可以通过拖放来重新排列来源面板左侧的窗格,方法与重新排列其他面板、标签页和窗格类似。

Chromium 问题:1473758

针对更多脚本类型提供语法突出显示和美化输出

来源面板现在可以:

  • 在以下脚本类型中以美化格式输出内嵌 JavaScript:moduleimportmapspeculationrules
  • 突出显示 importmapspeculationrules 脚本类型的语法,这两种脚本类型都包含 JSON。

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

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

Chromium 问题:1473875

模拟 prefers-reduced-transparency 媒体功能

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

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

Chromium 问题:1424879

Lighthouse 11

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

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

Chromium 问题:772558

无障碍功能改进

开发者工具现在支持更多导航按键操作:

  • CSS 概览:使用向上键和向下键浏览左侧边栏中的各个部分。
  • 回忆:在左侧边栏中,按 Tab 键将光标定位到快照旁边的保存按钮,然后按 Enter 键选择文件夹。

此外,我们还修复了一些屏幕阅读器播报问题。

Chromium 问题:1470401147130114741081468631

其他亮点

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

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

下载预览渠道

请考虑将 Chrome Canary开发者版Beta 版用作您的默认开发浏览器。通过这些预览版渠道,您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API,并帮助您在用户发现问题之前发现网站上的问题!

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。