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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

Chromium 问题：1471102、1471103、1471105。

更多本地替换项改进

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chromium 问题：1468875、1472019。

改进的“Sources”面板

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

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

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

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

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

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

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

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

Chromium 问题：1473758。

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

来源面板现在可以：

  • 在以下脚本类型中以美化格式输出内嵌 JavaScript：module、importmap、speculationrules。
  • 突出显示 importmap 和 speculationrules 脚本类型的语法，这两种脚本类型都包含 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 问题：1470401、1471301、1474108、1468631。

其他亮点

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

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

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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