2023年10月4日，Chrome DevTools 官推推送消息 “There are some exciting DevTools updates in Chrome 118! 🌟”，现把重要更新整理如下：

• styles 面板中新增自定义属性
• 改进本地重载
• 增强搜索功能
• 改进 Sources 面板
• Lighthouse 升级到 11 版本
• 改进可访问性
• 其他亮点

1.styles 面板中新增自定义属性

Elements 面板现在支持 @property CSS at-rule。它允许您显式定义 CSS 自定义属性并在样式表中注册它们，而不需要运行任何 JavaScript。

若要检查已注册的自定义属性，请在 “Elements > Styles” 中，将鼠标悬停在属性名上，并在工具提示中查看其描述符。在工具提示中，单击该链接即可折叠的 @property 部分中的已注册属性。

2.改进本地重载

延续上一版本的改进，本地重载现在可以实现以下功能：

• 在 Sources > Page 中，当您右键单击源代码映射文件并选择重载内容时，DevTools 将显示一个对话框，带您进入原始源代码。源映射文件的内容无法重载。

• Network 面板新增了 Has overrides 列和相应的 has-overrides:[content|headers|yes|no] 过滤器。要查看 Has overrides 列，请右键单击表头并选择它。

• 在 Sources > Overrides 中，Delete all overrides 菜单选项已替换为 Delete 选项，并具有精确的行为。

之前的 Delete all overrides 选项令人困惑，因为它只删除当前会话中激活的覆盖，并以紫色圆点图标标记。

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

要恢复以前的选项，请在 Settings > Experiments 中勾选 "Delete all overrides temporarily"。

3.增强搜索功能

现在，搜索结果会显示一行代码中找到的所有匹配项。以前，它只显示每行代码的第一个匹配项。当你搜索已被压缩的文件时，新行为尤其有用。当你点击搜索结果时，它会在编辑器中打开文件，现在不仅可以垂直滚动匹配项，还可以水平滚动。

此外，搜索速度也得到了提升，可以看一下左右对比：

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

4.改进 Sources 面板

4.1.简化 Sources 面板中的工作区

Sources 面板中工作区功能有了新的简化：

• 命名一致：最显著的是，*Sources > Filesystem 窗格更名为 workspace。该窗格中的各种用户界面文本现在更加清晰，没有冗余。
• 改进设置：拖放文件夹或单击链接选择文件夹时，可以看到更好的提示。

Sources > Workspace 可让您将 DevTools 中的更改直接同步到源文件。

看看新设置和工作流程：

4.2.重新排序 Sources 面板

现在可以通过拖放来重新排列 Sources 面板左侧的窗格，这与重新排列其他面板、选项卡和窗格的方法类似。

4.3.为更多脚本类型支持语法高亮和打印风格

现在，Sources 面板可以：

• 在以下脚本类型中漂亮地打印内联 JavaScript：module、importmap、speculationrules。
• 高亮显示 importmap 和 speculationrules 脚本类型的语法，这两种脚本类型都包含 JSON。

4.4.模拟 prefers-reduced-transparency 媒体功能

Chrome 118 现在支持 prefers-reduced-transparency 媒体功能。该功能可让开发人员根据用户在操作系统中选择的降低透明度偏好（如 macOS 上的降低透明度设置）调整网页内容。

要模拟此媒体功能，请打开 Rendering 选项卡并向下滚动。

5.Lighthouse 11

现在，Lighthouse 面板可运行 Lighthouse 11。最值得注意的是，该版本删除了旧版导航，增加了新的可访问性审核，并改变了可访问性类别的评分方式。

另请参阅完整的变更列表(https://github.com/GoogleChrome/lighthouse/releases/tag/v11.0.0)。要了解 DevTools 中 Lighthouse 面板的基本使用方法，请参阅 Lighthouse：优化网站速度(https://developer.chrome.com/docs/devtools/lighthouse/)。

6.改进可访问性

DevTools 现在支持更多导航按键：

• CSS Overview：使用上下箭头导航左侧边栏中的部分。
• Memory：在左侧边栏中，用 Tab 聚焦快照旁边的 Save 按钮，然后按 Enter 键选择文件夹。

此外，还修复了几个屏幕阅读器公告问题。

7.其他亮点

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

• Network：常用资源类型的新图标：media、wasm、websocket、manifest、fetch/xhr、json。
• 将许多 UI 元素的颜色更新为材质 3 颜色，尤其是在元素和性能面板中。
• Issues 现在可跨导航保留 cookie 问题。
• 对 Application > Preloading 进行了各种改进，其中最显著的是可排序网格和修订后的规则集详情。
• 对 Protocol monitor 中的命令编辑器进行了各种改进，主要包括输入错误警告、编辑已发送的命令、编辑无预定义键的对象参数、支持通过引用未定义的枚举、无类型引用的对象、通过子串匹配过滤命令等。
• Performance 火焰图在饼图的总方框周围添加了边框。
• Sources 现在不会将 CSS 中的破折号视为单词字符。
• 自动完成现在总是将 CSS 关键字排序在最后。
• RegEx 过滤器现在支持空格。
• Elements 修复了媒体查询功能检测。