多图预警!Chrome 118 DevTools 新功能介绍
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 修复了媒体查询功能检测。
大家都在看